javascript for is not working

Question

First time trying javascript and i cant find a solution about this. I need a open/close div button.

if div1 is not visible and i press button 1

set it visible

set all other not visible

elseif div1 is visible and i press button 1

set it not visible

this is my code so far...

<script type="text/javascript">
 function toggle_visibility(id) 
 {
 if (document.getElementById(id).style.display=='block')
 {
 document.getElementById(id).style.display='none';
 }
 else
 {
 document.getElementById(id).style.display='block';
 for (i=0; i<5; i++)
 {
 document.getElementById(i).style.display='none';
 }
 }
 }
</script>
<button onclick="toggle_visibility(1);">
 1
</button>
...
<button onclick="toggle_visibility(5);">
 5
</button>

i forgot this ->

<div id="1" style="display:none">
1
</div>
...
<div id="5" style="display:none">
5
</div>

• Dave Hogan: <div id="yourId"> and ideally the ID shouldn't start with a number
• David Thomas: Under html5 an id can start with a number.
• zPuls3: my problem is that i cant hide the visibled div, maybe something wrong with for
• rekire: why don't you loop thrue all and just make the right one visible in a second step?
• zPuls3: how? plz help, i am new in javascript...

Answer 1

You have no element with a id. And a id must not begin with an number (in (X)HTML, but not HTML5)! If you just want to show one element try my showOnly function.

<script type="text/javascript">
 function toggle_visibility(id) 
 {
 var i; // omiting this causes a global variable
 if (document.getElementById("a"+id).style.display=='block')
 {
 document.getElementById("a"+id).style.display='none';
 }
 else
 {
 document.getElementById("a"+id).style.display='block';
 for (i=1; i<=5; i++)
 {
 document.getElementById("a"+i).style.display='none';
 }
 }
 }
 function showOnly(id) {
 for(var i=1; i<=5; i++) {
 document.getElementById("a"+i).style.display='none';
 }
 document.getElementById("a"+id).style.display='block';
 }
</script>
<div id="a1" onclick="toggle_visibility(1);">1</div>
<!-- ... -->
<div id="a5" onclick="toggle_visibility(5);">5</div>

See also this fiddle.

• David Houde: +1. With regard to complete compatibility: ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
• rekire: Could you provide some useful informations? How should I help you with this information that it simple does not work? Copy an error message from a error console or better try e.g. Firebug for Firefox and check where your code breaks.
• zPuls3: there is no error message, it is not working. if i run onclick event, it opens the div, but it is not closing the other one. i also use some button for onclick event, check my question.
• rekire: @zPuls3 I had an error with the index. The loop has to start with index 1. See also my fiddle.

Answer 2

You're missing the ID attribute from your div's.

<div id="yourId"> 

Ideally the ID shouldn't start with a number.

In addition you can use the browser console window to help identify such problems.

• David Thomas: Except in html5, where an id can start with a number.
• Dave Hogan: Yes but I still stand by ideally it shouldn't
• rekire: document.getElementById(i).style.display='none'; is correct i it the loop variable.
• David Thomas: @Dave: why? It's perfectly valid, and so long as the doctype is specified, shouldn't be a problem (except, perhaps, for older browsers).