Hi,

I have a span, and in that I have many DIVs.
I want to enable one div at a time, on user click.

for this, i have written a JS function that changes display option for the divs.

the code is :

function enableGallery(name)
{
     var children=document.getElementById('gallery').childNodes;

         for (var i=0;i<children.length;i++)
         {
             elem = children[i];

             if (elem != null)
             {
                     elem.style.display='none';
             }
             else
             {
                     alert('elem is null');
             }
         }

         var my=document.getElementById(name);
         my.style.display='block';
}

my span looks like

                <span id="gallery" style="display:none;background-color: black; height: 100%; color: white; padding: 10px;">
                    <div id="simplegallery1" name = "simplegallery1"  style="display:none;background-color: black;"> </div>
<div id="simplegallery2" name = "simplegallery2"  style="display:none;background-color: black;"> </div>
<div id="simplegallery3" name = "simplegallery3"  style="display:none;background-color: black;"> </div>
                </span>

the JS function works well in IE, but in FF, it says it has 7 children elements, but then iterates only one time.

Any suggestion how to write this function in a browser independent manner?

Thanks in anticipation
Saurabh
<link drop removed>

a div is a block element and as such should NOT be inside an inline element such as a span.

Does it mean replacing all DIV with SPAN will solve my problem?

Should do, AND use the getElementsByTagName method insted of childNodes() as childNodes will return the text elements as "nodes"

Thanks, your tip was great. It indeed was giving me the text element.

It meant I had to use getElementbyId("<spanid>").getElementsbyTagName("d iv").

But it returned me a whole bunch of divs from whole page, not from the span container.

I thought getElementbyId.getElementsbyTagName should give me elements matching the tag name, and contained within the output of getElementbyId.

But it seems it just adds the output of both functions, and placing a dot between the two does not mean output of first would act as input of the next one.

This was weird for me. Anyways I have got it working, using absolute getElementbyId for all divs contained in the span.

Thanks for your good tip though.