function in HREF not working using javascript

Question

I have function which needs to be run on click event. However it is working fine with onclick attribute of anchor tag but not working with HREF attribute. It is giving id undefined. Here is demo code

HTML

<a href="javascript:test(this)" id="first">click</a>

JS

function test(obj){
alert(obj.id)
}

Answer 1

this in that context is the window , not the control. Placing javascript in the href is not the same as an event handler like onclick . Here's a fiddle .

Answer 2

这是一个修复：

<a href="#" onclick="javascript:test(this);" id="first">click</a>

Answer 3

This question already got answers but if you want to use a function as you used in your question then you should use it like

HTML:

<a href="http://heera.it" onclick="return test(this.id)" id="first">click</a>

JS:

function test(obj){
    alert(obj);
    return false; // this is required to stop navigation to that link
}

notice, return false , if you have value in href like this example, then you should use return false but there are other options like event.preventDefault() or event.returnValue = false (for IE) for this reason.

DEMO. Another DEMO (without return false ). Read about this keyword on MDN.

Answer 4

I enjoyed Matt Kruse's Javascript Best Practices article. In it, he states that using the href section to execute JavaScript code is a bad idea.

here are some good practices to call javascript on anchor:

<a href="javascript:;" onClick="return DoSomething();">link</a>
<a href="javascript:void(0);" onClick="return DoSomething();">link</a>
<a href="#" onClick="return DoSomething();">link</a>

Answer 5

Use onclick event of the anchor tag. this inside href represents current window.