I trying to get the target element's id when function fired, but `this` keyword returns `undefined`

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'
}

Answers:

Answer

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);
}

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.