Question

I trying to capture the target element’s id when function fired, but this keyword returns undefined

— HTML file. — (I can’t add any parameter in onclick function)
I have many <a> tag in the page and want to identify witch <a> tag was clicked.

<a href="#some_links" id="element_id" onclick = "object.pageName.functionName('parms1', 'parms2', 'parms3')">Get this object</a>

<a href="#some_links" id="second_element_id" onclick = "object.pageName.functionName('parms1', 'parms2', 'parms3')">Get this object</a>

— .js file —

object.pageName.functionName = function(a, b, c){
    alert(this); // returns 'undefined'
}

Answer 1

This is a very common question here on StackOverflow.

In short, your onclick gets wrapped in an anonymous function (which does have access to this. You have to pass it along.

— HTML file. —

<a href="#some_links" id="element_id" onclick = "object.pageName.functionName(this, 'parms1', 'parms2', 'parms3')">Get this object</a>

— .js file —

object.pageName.functionName = function(self, a, b, c){
    alert(self); // returns 'undefined'
}

Here is another way:

object.pageName.functionName = function(a, b, c){
    // Downside of this way, you can only use this function for one element.
    self = document.getElementById("element_id");
    alert(self);
}