Breaking Down Javascript Calls From a Link
I like being able to call Javascript code from a link. It offers great flexibility in designing an interactive user experience. Sure I could restrict myself to the events associated with form elements, but sometimes interaction with a link is the best solution. Of course with form elements we understand exactly how the onClick event works, but a link already has its own version of the onClick event built in. So what exactly happens when our link tag has both onClick and href attributes?
To get the most out of your Javascript-link relationship, it’s helpful to understand that the onClick attribute will be evaluated first. As an illustration consider this code:
<a href=“page.htm” onClick=“alert(‘Leaving the page, are we?’);”>click here</a>
When a visitor clicks this link, an alert box will pop up. Nothing else will happen until the visitor hits “OK” on the alert box. Once “OK” is clicked, the browser will load up page.htm.
Sometimes you may find yourself wanting to execute a Javascript command without leaving the page. One way I’ve seen this done is:
<a href=“#” onClick=“alert(‘Javascript is enabled, sailor.’);”>test Javascript</a>
Notice that the href tag is just a pound sign. This does keep the browser from going to a new page after the alert box’s “OK” button is clicked, but it will move to the very top of the current page. (Using href=“” will load the default page of the current directory.) Depending on the length of your page, moving to the top can be anywhere from unnoticeable to extremely annoying. The solution is to avoid “executing” the href attribute, achieved by adding a return statement to your Javascript.
<a href=“#” onClick=“alert(‘Javascript is enabled, sailor.’); return false;”>test Javascript</a>
Now your visitor will see the alert box and nothing else. It’s worth noting that if your visitor is using a browser that does not have Javascript enabled, the entire onClick attribute (including the return statement) is ignored. Those visitors will be treated to your href attribute no matter what.
Javascript Disabled
Perhaps you have a link that is completely useless if Javascript is not enabled. In this case, you don’t even need to show it to a visitor who can’t make use of it. Off the top of my head, I can think of two ways to approach this. I’m not sure if one is better than the other, but I’m open to anyone’s thoughts in the comments.
Option #1
The first option is to hide the link from visitors who don’t have Javascript. You can’t use Javascript to hide it from them, but you can hide the link by default and use Javascript to reveal it. The result is that only people with Javascript enabled will see the link.
<body onLoad=“document.getElementById(‘jslink’).style.display = ‘inline’;”>
…
<a id=“jslink” style=“display: none;” href=“#” onClick=“alert(‘Javascript is enabled sailor.’); return false;”>test Javascript</a>
Option #2
The second option is to not include the link in the basic HTML but add it using Javascript. If Javascript isn’t enabled, then the link never gets added to the page.
<body onLoad=“document.getElementById(‘jslinkholder’).innerHTML = “<a href=‘#’ onClick=‘alert(\“Javascript is enabled, sailor.\”); return false;’>test Javascript</a>”;>
…
<span id=“jslinkholder”></span>
Related Reading: An anecdote about not using href=“javascript: void(0);”
Hi,
Your tutorial is very helpful.. I just hope it can be applied to my problem… I also have this problem with .. my problem is that when I place the mouse pointer over the image, the status bar displays “javascript:void(0)” but when i removed the mouse pointer from the image, the “Error on page” is displayed instead… I have tried using href=”#” but to no avail… please help
thanks and more power!
PROBLEM for 2 weeks:
When i click
href=\”void(0)\” rel=\”nofollow\”
an overlay Window with some css background-image styles will show
*(on live site) in IE6 NO background image, but in Firefox YES ,
*(on my localhost) in IE6 YES background image also in Firefox YES
\”Whats happening here? no javascript errors rechecked external css links, images links ALL OK BUT WHY background-images wont show ON IE6 ON LIVE! but in local it shows?\”
I use then the \”#\” in href but after clicking the current screen will go to the VERY TOP, some kinda annoying.
AT LAST i googled this page THANK YOU VERY MUCH
will read more on your pages here.
@faye
Normally the brower will display the value of href in the status bar when you mouse over a link. You can override this with the Javascript line -> window.defaultStatus = “This is the status bar text”; Put that inside the onMouseOver and onMouseOut attributes of your link. Without knowing more about your code, it’s hard to say why the error message is coming up, though.
@Mark
The problem might be that you are using href=”void(0)” instead of href=”javascript: void(0);”. I assume that the way you have it now is trying to link to a file on you web server called void(0).