Javascript: style.display:'block' doesn't work
Question
any idea why this JavaScript just shows "block" and not the content of the (hidden) DIV?
<html>
<body>
<div id="mydiv" style="display:none">TEST</div>
<a href="javascript:document.getElementById('mydiv').style.display='block';">Show my DIV</a>
</body>
</html>
I also tried 'inline' but with the same result.
return false/true also failed.
onclick='' also failed.
I know there is style.visibility etc. but i need none/block.
Also the function should work inside the link, i don't want to call an external JS-function.
Thanks!
3 answers
solution1
5 2014-05-25 19:58:51
Because you want to use an onclick event handler, not the href attribute:
<a href="#" onclick="document.getElementById('mydiv').style.display='block';">Show my DIV</a>
(side note: inline JavaScript is usually frowned upon)
solution2
3 2014-05-25 20:26:43
The value of the javascript expression
document.getElementById('mydiv').style.display='block'
is the string 'block' - think of the way you can do a=b='something' - in javascript the value of an assignment expression is the assigned value.
If you try
<a href="javascript:'howdy'">link</a>
You'll find clicking the link navigates to a document containing just the word howdy - and the same thing is happening with your code. You can stop this happening by adding an explicit void(0) , or by wrapping the code in an immediately-invoked function expression that doesn't return a value (ie implicitly returns undefined ), so:
<a href="javascript:(function(){document.getElementById('mydiv').style.display='block';})()">
(This structure is commonly used in bookmarklets). However, as several comments have already pointed out, in general the use of javascript: hrefs is frowned upon, and you should consider using event handling instead.
solution3
0 2014-05-25 20:13:35
This code describes your problem: http://jsbin.com/jigiy/1
<div id="mydiv" style="display:none">TEST</div>
<a href="javascript:document.getElementById('mydiv').style.display='block',false;">Show my DIV</a>
Why is this happening:
Javascript setters return the value input, so document.getElementById('mydiv').style.display='block' will return 'block' , which is equal to href="javascript:'block'" . Now it refers to about:blank and sets its content to block .
I'm not sure why the browsers refer and set the content of about:blank , but i think this has something to do with data-urls.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.