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!

score 5 · Answer 1 · answered May 25 '14 at 19:58

5

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>

jsFiddle example

(side note: inline JavaScript is usually frowned upon)

answered May 25 '14 at 19:58

j08691

204,283
31
260
272

:-D a clever way of using javascript – Ali.Rashidi May 25 '14 at 20:00
4

Doesn't explain what's happening in his original code though. – MadSkunk May 25 '14 at 20:01
@MadSkunk - See http://stackoverflow.com/questions/1070760/javascript-function-in-href-vs-onclick – j08691 May 25 '14 at 20:06
In other words, "I don't know why it shows 'block' instead of acting as expected, here's a link re-enforcing the premise." – Jared Farrish May 25 '14 at 20:09

CupawnTae · Answer 2 · 2014-05-25T20:59:08.987

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 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.

bbuecherl · Answer 3 · 2014-05-25T20:19:50.993

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.

score 0 · Answer 4 · edited Aug 27 '21 at 16:34

0

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>

edited Aug 27 '21 at 16:34

Elikill58

4,050
24
23
45

answered Aug 27 '21 at 13:48

Dev

1

Thanks for your answer :) I just add snippet and fix typo error for your answer to make it easier to understand/use. Just, check date and other answer before posting, this question exist since 2014 and other answer seems as your own ;) – Elikill58 Aug 27 '21 at 16:45

score 0 · Answer 5 · answered Jun 19 '23 at 12:06

-> 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

Javascript: style.display:'block' doesn't work

5 Answers5

Linked