Forums

adhoc01

Hi,

Im trying to make some simple boxes that when clicked on drop down to give the user more information. This is obviously easy enough BUT I am really surprised with the issues I'm having in closing the other divs down when one opens.

Im using this code snippet:


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

function showMe (it)
{		
	for (i=0;i<=2;i++) {
	if (i == it) {
		document.getElementById('div_'+it).style.display ='block';}
		else {
		document.getElementById('div_'+i).style.display ='none';}
		}
}


</script>

and the link is :

<a href="javascript:showMe(1);">China</a>

Can anyone see any obvious issues with this code? Javascript really isn't my language - I'm mor eused to idiot based Python.

Thanks
Ad

chriscoyier

I'm not really that skilled at "raw" javascript like this. If you have a live link to an example though, so we could see the problem on the page, might be able to help...

Donna

Your routine works for me when I use the following markup. When I click on "China", it displays the first block and hides the second block and visa versa. I agree with Chris that you need to have a live link to your example and you should include the html markup as well because it is not clear what you are trying to do.

<head>
<script type=\"text/javascript\">

function showMe (it)
{
   for (i=0;i<=2;i++) {
   if (i == it) {
      document.getElementById('div_'+it).style.display ='block';}
      else {
      document.getElementById('div_'+i).style.display ='none';}
      }
}
</script>
</head>

<body>

<div id=\"div_0\">
  <h1>test</h1>
  <p>This is a test for China</p>
</div>

<div id=\"div_1\">
  <h1>test div_1</h1>
  <p>This is a test for Japan</p>
</div>

<a href=\"javascript:showMe(0);\">China</a>
<a href=\"javascript:showMe(1);\">Japan</a>

</body>

treehouse : what would you like to learn today?

Forums

Java Script