Help with div display changing script

[Darkmatter5]

Here's my HTML:

<table border='0' style='border-collapse: collapse;' width='500'>
  <tr style='border-bottom: 1px solid gray;'>
    <th width='100' align='left'>Armor Maker</th>
    <td align='right'>
      Levels: 
      <a href='javascript:togbld(31);'>1</a> 
      <a href='javascript:togbld(32);'>2</a> 
      <a href='javascript:togbld(33);'>3</a> 
    </td>
  </tr>
  <tr>
    <td colspan='2'>
      <div id='bld31' style='display: block;'>test1 1</div>
      <div id='bld32' style='display: none;'>test2 2</div>
      <div id='bld33' style='display: none;'>test3 3</div>
    </td>
  </tr>
</table>

 

Here's the Javascript:

function togbld(divnum) {
    for (i=1;i<999999;++i) {
        var div=document.getElementById("bld"+i);
        if(div==null) return;
        div.style.display=(i==divnum)?"block":"none";
    }
}

 

This code isn't working, how come??

[KevinM1]

Here's my HTML:

<table border='0' style='border-collapse: collapse;' width='500'>
  <tr style='border-bottom: 1px solid gray;'>
    <th width='100' align='left'>Armor Maker</th>
    <td align='right'>
      Levels: 
      <a href='javascript:togbld(31);'>1</a> 
      <a href='javascript:togbld(32);'>2</a> 
      <a href='javascript:togbld(33);'>3</a> 
    </td>
  </tr>
  <tr>
    <td colspan='2'>
      <div id='bld31' style='display: block;'>test1 1</div>
      <div id='bld32' style='display: none;'>test2 2</div>
      <div id='bld33' style='display: none;'>test3 3</div>
    </td>
  </tr>
</table>

 

Here's the Javascript:

function togbld(divnum) {
    for (i=1;i<999999;++i) {
        var div=document.getElementById("bld"+i);
        if(div==null) return;
        div.style.display=(i==divnum)?"block":"none";
    }
}

 

This code isn't working, how come??

 

Dunno, but the code is junk.  You're using the for-loop wrong.  Try this:

<script type="text/javascript">
   window.onload = function()
   {
      var toggles = new Array();
      var panes = new Array();
      var links = document.getElementsByTagName('a');
      var divs = document.getElementsByTagName('div');

      for(var i = 0; i < links.length; i++)
      {
         if(links.getElementById('toggle' + i))
         {
            toggles[i] = links.getElementById('toggle' + i);
         }
      }

      for(var j = 0; j < divs.length; j++)
      {
         if(divs.getElementById('bld' + j))
         {
            panes[j] = divs.getElementById('bld' + j);
         }
      }

      for(var k = 0; k < toggles.length; k++)
      {
         toggles[k].onclick = function()
         {
            panes[k].style.display = (panes[k].style.display == 'none') ? 'block' : 'none';
         }
      }
   }
</script>

<!-- ... -->

<table border='0' style='border-collapse: collapse;' width='500'>
  <tr style='border-bottom: 1px solid gray;'>
    <th width='100' align='left'>Armor Maker</th>
    <td align='right'>
      Levels: 
      <a id='toggle31' href='#'>1</a> 
      <a id='toggle32' href='#'>2</a> 
      <a id='toggle33' href='#'>3</a> 
    </td>
  </tr>
  <tr>
    <td colspan='2'>
      <div id='bld31' style='display: block;'>test1 1</div>
      <div id='bld32' style='display: none;'>test2 2</div>
      <div id='bld33' style='display: none;'>test3 3</div>
    </td>
  </tr>
</table>

 

Something like this should work, assuming you have the same number as links as you do divs, and it wouldn't hurt to keep their id's lined up (i.e., toggle31 is used for bld31, etc).

 

Keep in mind that I haven't tested this, so don't expect it to work properly just by cutting and pasting.  You may need to play with it.