Inline JavaScript in `href` not working as expected in Firefox

Question

Why doesn't this inline javascript work in Firefox? And how can I get it to work correctly in Firefox?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        h2 {display:inline; padding:0px 7px 0px;}
        h2 a {text-decoration:none}
        h2 a:link {color:#FFFFFF;} 
        h2#s0 {background-color:black;}
    </style>
</head>
<body>
    <h2 id="s0"><a href="javascript:document.getElementById('d0').style.display='block';">
Click me!</a></h2> 
    <div id="d0"
style="width:98%;border: 5px solid #000000;padding:3px; display:none;">
When you click the heading, this text should appear with a black
outline, with no gap between that and the heading background.</div>
</body>
</html>

In Safari this appears as it should. In Firefox it momentarily appears with a gap (as if the browser's in quirks mode) then everything on the page vanishes, replaced by the word "block". At first I thought that meant Firefox was blocking it, but it says "inline" instead if that's what I set the style to display.

EDIT: The Javascript part of my problem is now solved. But there's still a difference in the way the heading background appears: it extends down to the div border in Safari, but not in Firefox. Is there a way to make it do so in Firefox?

This works for me in Firefox 42 on Windows. What version are you using? Also, are there any extensions running? — gfullam, Nov 18 '15 at 14:25
Oh, you have to click the button first. You left that instruction out of your post. — gfullam, Nov 18 '15 at 14:27
Possible duplicate of [Javascript: style.display:'block' doesn't work](http://stackoverflow.com/questions/23859408/javascript-style-displayblock-doesnt-work) — Pankit Kapadia, Nov 18 '15 at 14:41

score 11 · Answer 1 · answered Nov 18 '15 at 14:41

11

The closest working form of what you have is:

<a href="javascript:void(document.getElementById('d0').style.display='block');">

Because:

When a browser follows a javascript: URI, it evaluates the code in the URI and then replaces the contents of the page with the returned value, unless the returned value is undefined. The void operator can be used to return undefined.

onclick is the better option here.

answered Nov 18 '15 at 14:41

Alex K.

171,639
30
264
288

Thanks Alex and @Burki. That has solved the Javascript problem. – Aidan Stanger Nov 18 '15 at 16:02

score 3 · Answer 2 · answered Nov 18 '15 at 14:32

3

On OSX firefox version 41.0.1 I also experienced the same issue in fiddle. I do not know why it does not work, it could be a bug in FireFox but you can do this to have a somewhat similar working solution:

<a href="#" onclick="document.getElementById('d0').style.display='block';">

answered Nov 18 '15 at 14:32

AtheistP3ace

9,611
12
43
43

Add a « # » to href force some browser to scroll top of the current page (IE for example) so it's not a good practice. – Bruno J. S. Lesieur Jun 07 '16 at 09:14

Burki · Answer 3 · 2015-11-18T14:48:07.853

3

Replace your link with this:

<a href="javaScript: void(0);" onclick="javascript:document.getElementById('d0').style.display='block';">

As far as i understand it, Firefox tries to open a URL if you put the javaScript call into the href attribute. (as you can see in your location bar) Putting it in the onclick instead makes it work fine.

I guess you could also use some preventDefault or such, and you could also try a href="#", but the a href="javaScript: void(0);" works just fine and is robust through all browsers i have tested so far.

edited Nov 18 '15 at 14:48

answered Nov 18 '15 at 14:35

Burki

1,188
19
28

Probably just a typo but i believe onclick is case sensitive. – AtheistP3ace Nov 18 '15 at 14:37
thank you, @AtheistP3ace, i changed that, and officially it's all lower case as you said, although camelcase works on my system. – Burki Nov 18 '15 at 14:48
1

Yea I think some browsers are more forgiving than others. =] – AtheistP3ace Nov 18 '15 at 14:49
1

@AtheistP3ace HTML tag names and attribute names are not case sensitive. – Pointy Nov 18 '15 at 14:57
Well color me surprised. Always thought they were. Is this new to HTML5 or always like this? http://www.w3.org/TR/html-markup/documents.html#case-insensitivity – AtheistP3ace Nov 18 '15 at 15:04
It is not new actually. HTML4 was same way. Sheesh. Shows what i know =[ – AtheistP3ace Nov 18 '15 at 15:06
2

XHTML is the case sensitive one – Alex K. Nov 18 '15 at 16:04

Inline JavaScript in `href` not working as expected in Firefox

3 Answers3