• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 263
  • Last Modified:

Can't access style properties of DIVs inside JavaScript loop

I can access any DIV tag (to make a style property change) by hard coding the ID of that tag but I want to make the ID dynamic and that's where the trouble starts. My approach is to put the ID values into an array and loop over the array to generate the style switching statements. But I get an error that says style is not an object.

The code is below. The hideAll() function works with the hardcoded ID. You can run it to see the effect I'm trying to achieve. The HideAll() function is the one that uses the dynamic ID but it doesn't work. If you can give me code that works in both IE and Netscape I'd be really happy but I'll take an IE only solution if you can give it.

Thanks,
Rod




<html>
<head>
      <title>Javascript Arrays, DOM and Stylesheets</title>
      
      <script language="JavaScript">
            // an array for the HideAll() function
            aSections=new Array();
            aSections[0]="Section_1";
            aSections[1]="Section_2";
            aSections[2]="Section_3";
      </script>

      <script language="JavaScript">
            function showhide_section(section_to_show) {
              if (section_to_show.style.visibility == "") {
                section_to_show.style.visibility = "hidden";
              } else {
                    hideAll();
                //HideAll(aSections);
                  section_to_show.style.visibility = "";
              }
            }
            
            function hideAll(aSections) {
                  Section_1.style.visibility = "hidden";
                  Section_2.style.visibility = "hidden";
                  Section_3.style.visibility = "hidden";
            }
            
            function HideAll(aMyArray) {
                  for (i=0; i<aMyArray.length; i++) {
                        aMyArray[i].style.visibility = "hidden";
                        //document.write (aMyArray[i] + "<br>"); // debugging
                  }
            }
      </script>
</head>
<body>

<span class=CategoryNavigator style="cursor: hand;" onclick="showhide_section(Section_1)">
Show Marketing
</span>
      &#0149;
<span class=CategoryNavigator style="cursor: hand;" onclick="showhide_section(Section_2)">
Show Sales
</span>
      &#0149;
<span class=CategoryNavigator style="cursor: hand;" onclick="showhide_section(Section_3)">
Show HR
</span>

<br>

<h1 ID=Section_1 STYLE="position:absolute; visibility: hidden;">Marketing</h1>
<h1 ID=Section_2 STYLE="position:absolute; visibility: hidden;">Sales</h1>
<h1 ID=Section_3 STYLE="position:absolute; visibility: hidden;">Human Resources</h1>

</body>
</html>
0
rod_nolan
Asked:
rod_nolan
  • 2
1 Solution
 
pauljkCommented:

function HideAll(aMyArray) {
for (i=0; i<aMyArray.length; i++) {
eval(aMyArray[i]+'.style.visibility = "hidden";)



Also...  Netscape and IE do not use the same methods to access the style object.  See example.
      if (navigator.appName=="Netscape")
             {
            layerRef="document.layers";
            styleSwitch="";
            }
      else
            {
              layerRef="document.all";
              styleSwitch=".style";
            }      
      if(status==1) eval(layerRef +'["' + menuName + '"]'+styleSwitch+'.visibility="visible"');
            else eval(layerRef +'["' + menuName + '"]'+styleSwitch+'.visibility="hidden"');
0
 
rod_nolanAuthor Commented:
Adjusted points from 100 to 150
0
 
rod_nolanAuthor Commented:
Thanks Paul, that did it! I knew it was something simple but I've been working on this one for a while so I'm glad to finally see it work. Thanks, again.

Rod
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now