Javascript in-line hiding within href attribute

Question

I am trying to figure out a way to hide and reappear things on my pages:

<a href="javascript: document.getElementById('something').style.display = 'inline'">
prompt
</a>
<div id="something" style="display:none">
text
</div>

Why isn't this working? This is an approach that should let me reappear the text when I click the prompt.

I am specifically interested in why isn't my href=javascript part working, not workarounds using onclick.

Put your inline javascript in the `onclick` attribute of the `a` tag. — mafafu, Feb 24 '14 at 19:44
@mafafu Thanks, this works, but I am still interested in why the original doesn't work, since I don't see the fault within the malfunctioning code. — Kravaros, Feb 24 '14 at 19:47
possible duplicate of [javascript hide/show element](http://stackoverflow.com/questions/6242976/javascript-hide-show-element) — Allende, Feb 24 '14 at 19:47
@Allende I don't think so, they are already using the onclick part, I am specifically interested in why it doesn't work with my href="javascript:" code. — Kravaros, Feb 24 '14 at 19:49
Ohh sorry you may want to edit your question and specify that, I actually don't know if you can "capture" the click within the href attribute, I will understand that your code will be executed (if it does) when the dom element is loaded only. — Allende, Feb 24 '14 at 19:52
@Allende Thanks, done. Well, things like Script obviously work, so this should too. — Kravaros, Feb 24 '14 at 19:56
Omm wait I think I got your point, you're trying to execute the js as if you were running the script in the address bar, aren't you? — Allende, Feb 24 '14 at 19:57
@Allende Possibly? I must admit, I do not know, I code using the trial and error method. — Kravaros, Feb 24 '14 at 19:59
Jajaja I do the same, it's weird I just have IE9 here (work) doesn't work at all, all the document disappear and just the hiddent div appears. But someway I think this the right way, possible maybe but I wouldn't recommend use this way, still interesting thing — Allende, Feb 24 '14 at 20:00
There are some interesting answers here:http://stackoverflow.com/questions/1070760/javascript-function-in-href-vs-onclick re;ated to this way of use js — Allende, Feb 24 '14 at 20:21
I think the browser is getting confused with all that script in the href tag. Not sure though. It DOES work in the href tag if you define your code as a function in a script tag and then call it from the href. However, I really would strongly advise against doing this all inline. — mafafu, Feb 24 '14 at 20:28
It seems to be a bad practice from the links Allende provided, but I don't still get why it doesn't work when it should. — Kravaros, Feb 24 '14 at 20:30
@Kravaros Just try executing an anom function, seems to work (see my updated answer) — Allende, Feb 24 '14 at 20:41
@Kravaros, np I'm also learning js and well this was fun (in a mystical and obscure way but fun) — Allende, Feb 24 '14 at 21:02

score 3 · Accepted Answer · edited May 23 '17 at 11:56

This (apperantly) will do the magic:

<a href="javascript:(function(){document.getElementById('something').style.display = 'inline';})()">

But I won't bet for it, and also I'm not able to figure out why using self-executing anom function it works.

More about self-executing anom functions here:

http://markdalgleish.com/2011/03/self-executing-anonymous-functions/

Even more about this (ancient?) technique also known for the purists as "Immediately-Invoked Function Expression (IIFE)":

http://benalman.com/news/2010/11/immediately-invoked-function-expression/

I'm still trying to understand why does it work, I think it's related to this functions are executed "inmediatly" and that it means before even the click event being propagated or the browser tries to navigate,it could be when the browser/jsengine access the href attr.

You should try then use the "onclick" event:

<a href="#" onclick="document.getElementById('something').style.display = 'inline'">
prompt
</a>

See this question (related to the above technique):

javascript hide/show element

And related to use href attribute for js scripting see this question:

JavaScript function in href vs. onclick

Javascript in-line hiding within href attribute

1 Answers1