How can I use a class method as onclick handler in JavaScript?

Question

Consider the following Javascript class:

function ClassA() {
 this.someVariable = someValue;
 this.myHandler = function(){
   // I WANT TO CALL InnerFunction
   this.innerFunction();
 };

 this.innerFunction = function(){
   // do something that accesses/manipulates someVariable
 };

 this.hookUp = function(id){
   document.getElementById(id).onclick = this.myHandler;
 };
};
...
...
var button = document.createElement('button');
button.setAttribute('id','mybuttonid');
// append button to the document
...
...
var x = new ClassA();
x.hookUp('mybuttonid');

When I click on the button, the handler executes, however, 'this' now refers to the button element instead of the ClassA object, so it cannot resolve innerFunction().

What i need to have is a way to indicate to the handler that the context of this is the instance of ClassA (similar to $.ajax({context: this....}) where you can use 'this' in the .done() or .error() handlers), or a way to pass a reference to the instance to the handler without making the handler execute at instantiation time. For example if I try to pass 'this' as a praremter to myHandler (myHandler=function(ref){}, and then change : document.getElementById(id).onclick = this.myHandler(this);) But as you add parameters to myHandler, the function is executed at class instantiation time instead of at click time.

Any help will be greatly appreciated.

Instead of this.someVariable try just using var someVariable. someVariable will only be available within the scope of the function, so shouldn't be any need for this. Also there's no such thing as classes in JavaScript, so your idea of using this might be misguided. — Ian Walker-Sperber
– Ian Walker-Sperber, Commented Oct 27, 2013 at 22:04
Thanks.. perhaps I was not very clear, my main problem is accessing innerFunction(). I am trying to write code that resembles OO so it would be easier to understand and maintain, at least for me :) . — adaj21
– adaj21, Commented Oct 27, 2013 at 23:50

score 5 · Accepted Answer · 2018-03-30 17:27:33Z

5

Replace...

this.myHandler = function(){
    this.innerFunction();
};

... with ...

var self = this;
this.myHandler = function() {   
    self.innerFunction();
};

See this article by Crockford. Cite:

By convention, we make a private that variable. This is used to make the object available to the private methods. This is a workaround for an error in the ECMAScript Language Specification which causes this to be set incorrectly for inner functions.

See also What does 'var that = this;' mean in JavaScript?

edited Mar 30, 2018 at 17:27

answered Oct 27, 2013 at 22:36

user1658543

Sign up to request clarification or add additional context in comments.

1 Comment

Diana Ionita Over a year ago

You, sir, have saved me hours of digging for solutions. Thank you !

zastrowm · Accepted Answer · 2013-10-27 22:15:21Z

Like you already discovered, the value of this depends on how the method is called. Thus, it can be confusing when using this within event handlers attached to DOM elements.

Instead, when adding handlers, use an an anonymous method along with a variable within a closure.

For example, change your hookup function to be:

this.hookUp = function(id) {
    var _this = this;
    document.getElementById(id).onclick = function() {
      _this.innerFunction();
    }
}

Notice that you no longer depend on this from within the onclick handler and thus avoid the problem. Once you're in innerFunction, you can continue to use this as you normally would, as it now correctly points to the correct object.

For a deeper explanation on how this works in functions, MDN has a nice article about the this keyword.

user1566994 · Accepted Answer · 2013-10-27 22:05:32Z

-1

this is a commonly solved using what's called 'Proxy Pattern'.

I think this will help (-!

http://addyosmani.com/resources/essentialjsdesignpatterns/book/#proxypatternjquery

answered Oct 27, 2013 at 22:05

user1566994

3042 silver badges9 bronze badges

Collectives™ on Stack Overflow

How can I use a class method as onclick handler in JavaScript?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related