使用JavaScript切换元素的可见性

Question

Trying to toggle the visibility of an element with JavaScript. It's working, but I have to click once first, which of course isn't optimal. Can someone point out to me why this isn't working properly?

 function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } 

 #foo { display: block; } 

 <a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a> <div id="foo">This is foo</div> 

Answer 1

Reverse your if and else tests. JavaScript can't read CSS properties from style unless it explicitly sets them:

 function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'none') e.style.display = 'block'; else e.style.display = 'none'; } 

 #foo { display: block; } 

 <a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a> <div id="foo">This is foo</div>