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!
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!
Share Improve this question asked May 25, 2014 at 19:55 Roman TischRoman Tisch 2173 gold badges4 silver badges13 bronze badges 05 Answers
Reset to default 5Because 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>
jsFiddle example
(side note: inline JavaScript is usually frowned upon)
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 (i.e. implicitly returns undefined
), so:
<a href="javascript:(function(){document.getElementById('mydiv').style.display='block';})()">
(This structure is monly used in bookmarklets). However, as several ments have already pointed out, in general the use of javascript:
hrefs is frowned upon, and you should consider using event handling instead.
This code describes your problem: http://jsbin./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.
Test this:
<html>
<body>
<div id="mydiv" style="display:none">TEST</div>
<span onclick="document.getElementById('mydiv').style.display = 'block'">Show my DIV</span>
</body>
</html>
-> my problem was using this method to display html tag:
const helloDiv = document.getElementById('hello')
helloDiv.style.display = "block"
-> the solution was to replace html tag:
document.getElementById('hello').style.display = "block"
and it worked for me