Get ID of clicked on element in function

Question

I want to get the ID of an element I click on. I put the function in the onclick element, like this:

<a id="myid" class="first active" onclick="markActiveLink();" href="#home">Home</a>

And this is in the function:

function markActiveLink() {   
    alert($(this).attr("id"));
}

This doesn't work, as it says it isn't defined. Does it really forget about the ID, do I have to type it in the onclick?

Answer 1

Try: onclick="markActiveLink(this);" and

function markActiveLink(el) {   
    alert($(el).attr("id"));
}

Answer 2

why using an inline handler? Move to unobtrusive js

$(document).ready(function(){
  $('#myid').bind('click', function(){
     alert($(this).attr('id'));
  });
});

Answer 3

You have to pass the element to the function. JS itself isn't smarter than you :)

html:

<a id="myid" class="first active" onclick="markActiveLink(this);" href="#home">Home</a>

js:

function markActiveLink(e) {   
    alert(e.id);
}