Used to work but recently broken in Chrome

Question

This used to work perfectly on my site but has recently stopped working on Chrome:

<a href="javascript:document.getElementById('cite1').style.display='block';">
Cite
</a>
<div style="display:none; font-size:10pt; margin-top:11px; margin-bottom:7px;" id="cite1">
Information goes here
</div>

It used to correctly make the text appear, but now it changes the entire page to a white screen with the word "block" on it.

Any ideas why?

Just to be clear, can you include which version of Chrome and on which OS — Matt R. Wilson, Sep 15 '13 at 19:10
can you add a jsfiddle with demonstration ? how are other browses working ? — c69, Sep 15 '13 at 19:12

score 2 · Answer 1 · answered Sep 15 '13 at 19:13

2

Not sure why it worked and stopped, but this works: http://jsfiddle.net/6QZGp/

<a href="#" onclick="javascript:document.getElementById('cite1').style.display='block';">
Cite
</a>

answered Sep 15 '13 at 19:13

emsoff

1,585
2
11
16

`href="#"` is inherently bad in that `#` links to the top of the page. You should still prevent the default browser action by returning `false` inside `onclick` in that case. Or you can use something else than an anchor element (e.g. a styled `span`) which is probably more suitable. – Fabrício Matté Sep 15 '13 at 21:07

The Alpha · Accepted Answer · 2013-09-15T19:22:37.083

1

Just make this look like, notice return false; at the end.

<a href="javascript:document.getElementById('cite1').style.display='block';return false;">Cite</a>

Or, add void(0); at the end, like this demo.

DEMO.

edited Sep 15 '13 at 19:22

answered Sep 15 '13 at 19:12

The Alpha

143,660
29
287
307

1

You shouldn't put JS in a href anyway. Onclick event handlers were meant to handle this. – j08691 Sep 15 '13 at 19:19
This works, thanks. Regarding putting js in href, yes it is oldschool but I've done this for a reason as I don't want to influence the hashtag part of the URL on the page. – Alasdair Sep 15 '13 at 19:23
It's possible using old school `javascript:` way. – The Alpha Sep 15 '13 at 19:24

score 1 · Answer 3 · edited May 23 '17 at 11:50

1

The reason why is because the browser is trying to follow the link of the anchor (pointing to anything).

Try:

<a href="#" onclick="javascript:document.getElementById('cite1').style.display='block';return false;">
Cite
</a>

Good explaination of using of href and onclick: JavaScript function in href vs. onclick

Demo: http://jsfiddle.net/IrvinDominin/XQ7RP/

edited May 23 '17 at 11:50

Community

1
1

answered Sep 15 '13 at 19:23

Irvin Dominin

30,819
9
77
111

Used to work but recently broken in Chrome

3 Answers3