CODEWITHSUNDEEP
javascriptcss
Roman Tisch
Roman Tisch

Reputation: 219

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

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!

Upvotes: 4

Views: 20050

Answers (5)

Kamal Zaitar
Kamal Zaitar

Reputation: 186

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

Upvotes: 0

Dev
Dev

Reputation: 1

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>

Upvotes: 0

CupawnTae
CupawnTae

Reputation: 14580

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.

Upvotes: 4

bbuecherl
bbuecherl

Reputation: 1619

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.

Upvotes: 0

j08691
j08691

Reputation: 207891

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)

Upvotes: 5

Related Questions