find all divs whose elementId contains a substring

EllenM1 · 03-21-2005, 01:01 AM

Hi - I have a page with a lot of divs which I'd like to hide, and then show just the one whose link I click.

The function is like this:

function switchLayer(selectedLayer)
{
document.getElementById('findOnlyElementsWhoseIdBeginsWithStringXXX').style.visibility = 'hidden';
document.getElementById('container_' + selectedLayer).style.visibility = 'visible';
return false;
}

this would eliminate the need to separately hide each layer. How can I write the code so the getElementById returns all elements whose ID begins with 'mystring'?

Thanks

Ellen

EllenM1 · 03-21-2005, 01:53 AM

I am also trying getElementsByTagName

and giving each div a name="container"

then

document.getElementsByTagName('container').style.visibility = 'hidden';

but Netscape's javascript console tells me

Error: document.getElementsByTagName("container").style has no properties

What am I doing wrong?

codegoboom · 03-21-2005, 09:45 AM

tagName is different than name, and the name attribute is for form elements.

There are "getElementsByTagName", or "getElementsByName" methods.

They both return a collection. A particular item in the collection is accessed by index, like an array [0], [1], [2], etc., or using the item property of the collection item(0), item(etc.).

About your first question, getElementById does not return a collection, so you will have to loop a collection of elements, and check the id property of each item, or something...

EllenM1 · 03-21-2005, 01:23 PM

Thank you - that makes sense.

codegoboom · 03-21-2005, 01:39 PM

Really?

Great!

EllenM1 · 03-21-2005, 02:18 PM

Code:

function switchLayer(selectedLayer)
{ 
myContainerArray = document.getElementsByName('container'); 
for (i=0; i < myContainerArray.length; i++) 
{ 
 **myContainerArray[i].style.visibility = 'hidden'; 
}
document.getElementById('container_' + selectedLayer).style.visibility = 'visible';
}

Each layer I want turned on and off (there's a lot of them)has an ID:
id="container_art" or "container_css"

And each layer has a name:
name='container'

So it loops through and grabs ALL divs whose name is 'container' and sets their visibility to "hidden"
then it turns on just the one layer I want.

codegoboom · 03-21-2005, 03:03 PM

Sounds good.

Regarding the name attribute, a *more valid* way may be to use getElementsByTagName to get a collection; for example, if all elements were contained in an outer div, one could give that an id, like <div id="container">... and get its collection using:

Code:
var myContainerCollection = document.getElementById("container").getElementsByTagName("*");
... or a specific tag name if those are all alike.

EllenM1 · 03-21-2005, 05:36 PM

I've discovered a problem - it seems to NOT hide all the divs every time. I'm not sure why.

The test page is at:

http://thedesignspace.net/index8.php

This doesn't have to do with the change I just made - it was doing this even without the surrounding div you suggested.

Oh well - maybe I'll do this by simply listing all the divs I want to hide.

codegoboom · 03-21-2005, 05:57 PM

It looks like you're not distinguishing between a "name" and a "tag name" the tag name is the name of the element's tag, not its name attribute, so using getElementsByTagName("container") is bound to fail...

EllenM1 · 03-21-2005, 06:21 PM

I have tried it with getElementsByName and it seems to not behave correctly that way either.

Thanks though!

codegoboom · 03-21-2005, 07:01 PM

It's a simple matter... you are doing something wrong (but I haven't the will to prove it).

EllenM1 · 03-22-2005, 02:32 AM

All day, I had been testing this on IE for PC, and was in despair. Then I tried the same page on Safari - seems to work well. Also works well on Netscape for Mac. Could be Safari and NS are more tolerant of my errors, or IE is very picky.

Anyway, thanks very much for your help.

Harry Armadillo · 03-22-2005, 04:04 AM

Run this snippet in both IE and Firefox, and you should see why IE isn't working.

Code:

<html><body>
<div id='anId' name='aName'>a lonely div</div>
<script>
alert("document.getElementsByName('anId')= " +document.getElementsByName('anId').length+
    "\ndocument.getElementsByName('aName')= "+document.getElementsByName('aName').length+
    "\ndocument.getElementById('anId')= " +document.getElementById('anId')+
    "\ndocument.getElementById('aName')= "+document.getElementById('aName') );
</script>
</body></html>

You're going to need to make an onload function builds an array of your container divs for later use.

EllenM1 · 03-22-2005, 03:20 PM

Yeah, it alerted like this:

document.getElementsByName('anId)=1
document.getElementsByName('aName')=0
document.getElementByID('anId')=(object)
document.getElementById('aName')=null

in other words, it is interpreting the Id as a Name in this case. And basically ignoring the "Name" I have set for the div.

According to this post

and also according to codegoboom,

IE interprets the getElementsByName only when the element is a form control, like input or select or whatever. Other browsers interpret it differently I guess.

So I will try loading them all as an array first.

Thanks everyone.

Mr J · 03-22-2005, 06:48 PM

How about this way

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script type="text/javascript" language="javascript">

</script>

<style>
.article{
position:absolute;
display:none;
}
</style>
</HEAD>
<BODY>

<div style="font-size:12px">
<a href="#null" onclick="show_me('div1')">Article One</a><BR>
<a href="#null" onclick="show_me('div2')">Article Two</a><BR>
<a href="#null" onclick="show_me('div3')">Article Three</a><BR>
<a href="#null" onclick="show_me('div4')">Article Four</a><BR>
</div>

<div id="div1" class="article">
<h1>Article One</h1>
</div>

<div id="div2" class="article">
<h1>Article Two</h1>
</div>

<div id="div3" class="article">
<h1>Article Three</h1>
</div>

<div id="div4" class="article">
<h1>Article Four</h1>
</div>

</BODY>
</HTML>