Take the 2-minute tour ×

What does the following code mean -

<a href="javacsript:;" onClick="addItem(160)">some link</a>

My basic doubt is which script is run when we click on the link

share|improve this question
add comment

5 Answers

up vote 3 down vote accepted

The onclick will run first. If onclick doesn't return false (in this case it doesn't), then href will be processed.

share|improve this answer
and what script will be called when the href is processed? –  ayush Jun 5 '10 at 5:41
In your example, the inline JavaScript (javascript:;) will be processed. If href was a regular URL, the browser would just navigate to it. –  Matt Jun 5 '10 at 5:42
Nothing. The author is probably thinks that this is a good way to prevent the anchor from pushing to another page if the onclick doesn't return false. You'll also see javascript:void() a lot. It's actually best to ensure the onclick event returns false and, if it doesn't, make sure the href pushes to a fallback of some sort. Or, don't use the anchor tag at all. –  Andrew Jun 5 '10 at 5:45
the href="javascript:;" is a non-operation. it is an empty javascript call. –  Matt Jun 5 '10 at 5:46
Actually it doesn't matter what addItem returns in your example. If it were onclick="return addItem(160)" THEN addItem's return value would have an effect on whether or not href is processed. –  Matt Jun 5 '10 at 5:51
show 3 more comments

The javascript part in the href attribute is the protocol (you know, like http, ftp or mailto). What it does is it tells the browser that the URL is actually JavaScript code.

Normally, when you click on a link, the browser will execute whatever it finds in the href attribute. However, the browser will also trigger the onclick event before it handles the href thing. So, setting an onclick handler will override the normal behavior.

Thus, the event handler becomes king and it has the possibility to allow or prevent the default browser behavior by returning true (allow) or false (prevent).

So, in your example, when you click on that link, the browser will trigger addItem. If it returns false, nothing happens. If it returns true, the browser will execute the code in the href attribute. But since it finds no statement in there (i.e. empty statement), nothing happens.

Try the following code:

<a href="http://google.com/" onclick="return false;">won't go to google.com</a>
<a href="http://google.com/" onclick="return true;">will go to google.com</a>

Does that make sense to you?

share|improve this answer
add comment

your doubt is true !, you must find "function addItem(x)" in a javascript file that linked by script tag from the page.(usually in head tag)

share|improve this answer
the function addItem is there in one of the script files. my doubt is though that what would happen if addItem return false? –  ayush Jun 5 '10 at 5:51
add comment

The "javascript:" inside href is a way to tell the browser to execute javascript instead of going to a different page.

This line, for example will show a message box with "testing" message.

<a href="javascript:alert('testing');">Click me</a>

and this one will execute an empty javascript statement that will do nothing

<a href="javacsript:;">Click me</a>

The onclick is an event that also fires when a link is clicked. In contrast to href it does not allow you to put in a link to a different page; it accepts only javascript.

Browsers will first fire onclick event and then process href attribute. If it's an URL (empty href means current URL; click will just refresh the page) it will follow it, if it's javascript it will execute it.

Putting "javascript:;" or "javascript:void(null);" inside href is old and wrong technique to ensure browser does not not refresh the page after onclick is processed.

To answer your question; both scripts will execute, but the href script will do nothing.

share|improve this answer
Not so simple as that, @Luc!! See what happens if the script actually returns a value! –  Pointy Jun 5 '10 at 11:57
add comment

Note that when the browser interprets the "javascript:" value of an "href", if the return value is not empty then it is interpreted as the document content desired for the <a> tag! Here is a test page for you to enjoy:


The source for that page (look at it; it's really short) includes the following link:

<a href='javascript:getLink()'>Click to go there!</a>

The function "getLink()" is defined as follows:

  function getLink() {
    var sel = document.getElementById('sel');
    return sel.options[sel.selectedIndex].value;

As you see, the function grabs the current selected value of the <select> element on the page and returns that. What does the <select> element look like?

<select id='sel'>
  <option value='<html><head><meta http-equiv="refresh" content="2;http://cnn.com"/></head><body>Redirecting to CNN ...</body></html>'>CNN</option>

  <option value='<html><head><meta http-equiv="refresh" content="2;http://zombo.com"/><head><body>Redirecting to Zombocom ...</body></html>'>Zombocom</option>
  <option value='<html><head><meta http-equiv="refresh" content="2;http://reddit.com"/></head><body>Redirecting to Reddit ...</body></html>'>Reddit</option>

The values of those options are complete HTML markup for a page with a redirect to the requested site. Because the URL returns a value, that value is understood by the browser to be the new page content.

It's pretty mind-blowing. I'm not sure why you'd ever do this.

share|improve this answer
add comment

Your Answer


