befuddled by foo

[HippieChickie]

Hello

I have a working code that when you click an image in 1 div it shows a larger image & a few words.

I my html each div increases the number by 1 i.e.: foo1, foo2, foo3 & so on.

for some reason, foo9 & foo10 will not work & I cant seem to figure out why.

I have checked to make sure the image path is correct & all names are correct & everything looks good.

if anyone can pls help i would greatly appreciate it.

I have included the code/html but you can see it in action at: http://whambamgames.com/wb/formats/pattern.html & scroll down near bottom.

<script type="text/javascript">

function show_visibility(IDS){
  hide_visibility();
  document.getElementById(IDS).style.display = 'block';
}

function hide_visibility(){
  var sel = document.getElementById('lnks').getElementsByTagName('div');
  for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
}

</script>

<tr>
				<td class="auto-style1"><a href="#foo4" onclick="show_visibility('foo4')"><img border="0" src="images/pattern/smileyface.jpg" width="75" height="150"></a></td>
				<td class="auto-style1"><a href="#foo5" onclick="show_visibility('foo5')"><img border="0" src="images/xtreme/xtreme4.gif" width="75" height="150"></a></td>
				<td class="auto-style1"><a href="#foo6" onclick="show_visibility('foo6')"><img border="0" src="images/pattern/arrow.jpg" width="75" height="150"></a></td>
				<td class="auto-style1"><a href="#foo9" onclick="show_visibility('foo9')"><img border="0" src="images/pattern/rectangle.jpg" width="75" height="150"></a></td>
				<td class="auto-style1"><a href="#foo3" onclick="show_visibility('foo3')"><img border="0" src="images/pattern/plus.jpg" width="75" height="150"></a></td>
				<td class="auto-style1"><a href="#foo7" onclick="show_visibility('foo7')"><img border="0" src="images/pattern/butterfly.jpg" width="75" height="150"></a></td>
				<td class="auto-style1"><a href="#foo8" onclick="show_visibility('foo8')"><img border="0" src="images/pattern/corners.jpg" width="75" height="150"></a></td>
				<td class="auto-style1"><a href="#foo2" onclick="show_visibility('foo2')"><img border="0" src="images/pattern/cross.jpg" width="75" height="150"></a></td>
				<td class="auto-style1"><a href="#foo1" onclick="show_visibility('foo1')"><img border="0" src="images/pattern/pinwheel.jpg" width="75" height="150"></a></td>
				<td class="auto-style1"><a href="#foo10" onclick="show_visibility('foo10')"><img border="0" src="images/pattern/rrtracks.jpg" width="75" height="148"></a></td>
				<td class="auto-style1"><img border="0" src="images/pattern/blank.gif" width="75" height="150"></td>
			</tr>





<div id="lnks" style="height: 300px; margin-left: 200px; margin-top: -2px; width: 592px;">

      
        <div id='foo0' style="display:show; background: #ffffff; width:99%;">&nbsp;
  <p style="width: 354px"><b><font face="Arial">Click any Image to see how to make it.</font></b></p>
  <p><img border="0" src="images/pattern/blank.gif" width="168" height="333"></div>

 <div id='foo1' style="display:none; background: #ffffff; width:100%;">&nbsp;
  <p><b><u>PINWHEEL:</u></b><br> Do NOT let BALLS 2 & 4 get in the Home Triangle!</p>
  <p><img border="0" src="images/pattern/pinwheel.jpg" width="168" height="333"></p>
  <p>&nbsp;</div>
 
 <div id='foo2' style="display:none; background: #ffffff; width:100%; ">&nbsp;
  <p><b><u>CROSS:</u></b><br> 3 Players MUST only get BALL 3 in the Home Triangle!  1 Player must get BALL 3 & 4</p>
  <p><img border="0" src="images/pattern/cross.jpg" width="168" height="333"></p>
  <p>&nbsp;</div>
 
 <div id='foo3' style="display:none; background: #ffffff; width:100%;">&nbsp;
  <p><b><u>PLUS:</u></b><br> Do NOT let balls 1 & 2 get in the Home Triangle!</p>
  <p><img border="0" src="images/pattern/plus.jpg" width="168" height="333"></p>
  <p>&nbsp;</div>
   
 <div id='foo4' style="display:none; background: #ffffff; width:100%;">&nbsp;
  <p><b><u>SMILEY FACE:</u></b><br> 1 Player MUST get BALLS 1,4 and 2 in the Home Triangle,<br> Their pard must get BALLS 1 and 2 in.</p><p> The other Pards must get in BALL 2 and his pard BALL 1</p>
  <p>&nbsp;</p>
  <p><img border="0" src="images/pattern/smileyface.jpg" width="168" height="333"></div>
  
 <div id='foo5' style="display:none; background: #ffffff; width:100%;">&nbsp;
  <p><b><u>SNOWFLAKE:</u></b><br>  Do NOT let BALL 4 get in the Home Triangle!</p>
  <p><img border="0" src="images/pattern/snowflake.gif" width="168" height="333"></p>
  <p>&nbsp;</div>

 <div id='foo6' style="display:none; background: #ffffff; width:100%;">&nbsp;
  <p><b><u>ARROW:</u></b><br> 1 Player MUST get ALL 4 BALLs in the Home Triangle! Their Pard must get BALL 3 & 4 in <br> The other 2 players must get BALL 2 in and his Pard must get in BALL 1</p>
  <p><img border="0" src="images/pattern/arrow.jpg" width="168" height="333"></p>
  <p>&nbsp;</div>

 <div id='foo7' style="display:none; background: #ffffff; width:100%;">&nbsp;
  <p><b><u>BUTTERFLY:</u></b><br> 1 Player MUST get BALLs 1, 2 & 3 in the Home Triangle. His Pard must ONLY get BALL 3 in <br> The other 2 players must get BALLS 1, 2 and 4 in the Home Triangle!</p>
  <p><img border="0" src="images/pattern/butterfly.jpg" width="168" height="333"></p>
  <p>&nbsp;</div>

 <div id='foo8' style="display:none; background: #ffffff; width:100%;">&nbsp;
  <p><b><u>CORNERS:</u></b><br> Do NOT let balls 3 & 4 get in the Home Triangle! </p>
  <p><img border="0" src="images/pattern/corners.jpg" width="168" height="333">  <p>&nbsp;

 <div id='foo9' style="display:none; background: #ffffff; width:100%;">&nbsp;
  <p><b><u>RECTANGLE:</u></b><br> Do NOT let balls 3 & 4 get in the Home Triangle! </p>
  <p><img border="0" src="images/pattern/rectangle.jpg" width="168" height="333">  <p>&nbsp;

 <div id='foo10' style="display:none; background: #ffffff; width:100%;">&nbsp;
  <p><b><u>RAILROAD TRACKS:</u></b><br> Do NOT let balls 3 & 4 get in the Home Triangle! </p>
  <p><img border="0" src="images/pattern/rrtracks.jpg" width="168" height="333">  <p>&nbsp;

  <div>
                  </div>
      </div>
    
    </div>
    </p>

thanks
HippieChickie

[jscheuer1]

This:

<div id='foo8' style="display:none; background: #ffffff; width:100%;">&nbsp;
  <p><b><u>CORNERS:</u></b><br> Do NOT let balls 3 & 4 get in the Home Triangle! </p>
  <p><img border="0" src="images/pattern/corners.jpg" width="168" height="333">  <p>&nbsp;

 <div id='foo9' style="display:none; background: #ffffff; width:100%;">&nbsp;
  <p><b><u>RECTANGLE:</u></b><br> Do NOT let balls 3 & 4 get in the Home Triangle! </p>
  <p><img border="0" src="images/pattern/rectangle.jpg" width="168" height="333">  <p>&nbsp;

 <div id='foo10' style="display:none; background: #ffffff; width:100%;">&nbsp;
  <p><b><u>RAILROAD TRACKS:</u></b><br> Do NOT let balls 3 & 4 get in the Home Triangle! </p>
  <p><img border="0" src="images/pattern/rrtracks.jpg" width="168" height="333">  <p>&nbsp;

  <div>
                  </div>
      </div>
    
    </div>
    </p>

Should probably be:

<div id='foo8' style="display:none; background: #ffffff; width:100%;">&nbsp;
  <p><b><u>CORNERS:</u></b><br> Do NOT let balls 3 & 4 get in the Home Triangle! </p>
  <p><img border="0" src="images/pattern/corners.jpg" width="168" height="333">  <p>&nbsp;</div>

 <div id='foo9' style="display:none; background: #ffffff; width:100%;">&nbsp;
  <p><b><u>RECTANGLE:</u></b><br> Do NOT let balls 3 & 4 get in the Home Triangle! </p>
  <p><img border="0" src="images/pattern/rectangle.jpg" width="168" height="333">  <p>&nbsp;</div>

 <div id='foo10' style="display:none; background: #ffffff; width:100%;">&nbsp;
  <p><b><u>RAILROAD TRACKS:</u></b><br> Do NOT let balls 3 & 4 get in the Home Triangle! </p>
  <p><img border="0" src="images/pattern/rrtracks.jpg" width="168" height="333">  <p>&nbsp;
      </div>
    
    </div>
    </p>

In any case there are missing closing </div> tags such that foo9 and 10 appear to the browser to be a part of foo8.

[HippieChickie]

thanks so much! you are brilliant! that was exactly the problem!

Have a great day!
HippieChickie

[styxlawyer]

As my previous post was removed without comment or reason given, I'll repeat it. Whereas earlier it was only 50+ errors, there are now over 100 errors in your page which the W3C Validator has picked up.

Link

Using the W3C Validator will frequently help you find simple errors yourself.

[jscheuer1]

It is desirable to have valid code/markup - yet it's not essential. I would go further. It's a very good idea to have valid code/markup. That said - when a perfectly good solution has already been offered, I think it's also a very good idea to wait until the OP has digested and responded to that before anyone goes about harping about valid code/markup. Once that has happened (the OP has gotten and acknowledged their answer), then it's fine to harp on fundamentals - or whatever anyone might want to add, as long as it's constructive.

I would go further. If fundamentals are your main thing - you should probably blog about them (You can even do that here - the DD forum has free blogging available for regular participants such as yourself). The forum here is more about solutions to specific issues.

That said - I admit it's a gray area. If you get there first - fine, talk about valid markup all you want. If you are not first on the scene though, unless the advice already given is obviously wrong, PLEASE give the OP a chance to digest it before adding your own 2 cents.