How can I get an object inside a javascript event handler?

Question

I am trying to get an object inside the onclick event handler function.

But it is not working the way I expect it to.

For example, if I run this code:

var entries = [{id: 1},{id: 2},{id: 3}];

for (var i = 0; i < entries.length; i++) {

    var entry = entries[i];

    document.getElementById(entry.id).onclick = function () { 
        console.log("this.id: " + this.id);
        console.log("entry.id: " + entry.id);
    };

}

What I expect is:

this.id: 1
entry.id: 1

this.id: 2
entry.id: 2

this.id: 3
entry.id: 3

But what I get is:

this.id: 1
entry.id: 3

this.id: 2
entry.id: 3

this.id: 3
entry.id: 3

Why is the entry object always the entry with the id 3?

How can I get the correct entry object inside the click event handler?

You're already getting the correct value via the event.target.id and event.currentTarget.id attributes. The console is receiving an entry value of 3 because that's the last iteration in the for loop. — user1385191
– user1385191, Commented Jan 19, 2011 at 3:36

Ateş Göral · Accepted Answer · 2011-01-19 03:33:25Z

6

One way to fix this is:

var entries = [{id: 1},{id: 2},{id: 3}];

for (var i = 0; i < entries.length; i++) {

    var entry = entries[i];

    document.getElementById(entry.id).onclick = (function (id) {
        return function () { 
            console.log("this.id: " + this.id);
            console.log("entry.id: " + id);
        };
    })(entry.id);

}

You can use a self-executing function (whose purpose is to provide a closure that entry.id will be bound to) to return you a new onclick handler that is bound to the particular id.

If you don't do this, all your onclick handlers get bound to the same entry variable and end up with the last value it received during the for loop.

answered Jan 19, 2011 at 3:33

Ateş Göral

141k27 gold badges142 silver badges191 bronze badges

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

Comments

Manish · Accepted Answer · 2011-01-19 03:43:22Z

2

This is because of the way closures work in JavaScript. The onclick reference on all the 3 elements store the same function which after the loop has entry pointing to last entry. Hence the result. You can get your result by wrapping it in another function having the needed entry. Following is one way to do it:

var entries = [{id: 1},{id: 2},{id: 3}];

for (var i = 0; i < entries.length; i++) {

    var entry = entries[i];

    function setOnClickHandler(entry) {
        document.getElementById(entry.id).onclick = function () { 
            console.log("this.id: " + this.id);
            console.log("entry.id: " + entry.id);
        };  
    }

    setOnClickHandler(entry);
}

I've written a small post on this.

answered Jan 19, 2011 at 3:43

Manish

2,1152 gold badges22 silver badges29 bronze badges

1 Comment

Yaz Over a year ago

All the solutions proposed here work fine, but I like your solution more because I find it more clean and easy to understand.

Hemlock · Accepted Answer · 2011-01-19 14:51:03Z

This is one of the tricky things about closure. You are creating those event handlers with a closure over entry. They all have access to that variable, that exact variable. Consequently once those events fire they get only the last value set to entry. You need to break the closure. Here is one way.

function addClickHandlers() {
  var entries = [{id: 1},{id: 2},{id: 3}];
  var i = entries.length;
  while (i--) {
    var entry = entries[i];
    document.getElementById(entry.id).onclick = getClickHandler(entry);
  }
}  

function getClickHandler(entry) {
  return function() { 
    console.log("this.id: " + this.id);
    console.log("entry.id: " + entry.id);
  };
}

Note: I changed your for loop into a while just because it's the fastest way to loop in javascript when order isn't important and I think it's slick.

Added for completeness

There are some other methods designed to deal with this situation. I find that I use them all the time.

In Ext there is createDelegate

myhandler.createDelegate(scope, [arguments], [appendArgs]);

For javascript 1.8.5 there is Function.prototype.bind

myhandler.bind(scope, arguments)

Writing Function.prototype.bind is pretty easy (lifted from here)

Function.prototype.bind = function(self, var_args) {
  var thisFunc = this;
  var leftArgs = Array.slice(arguments, 1);
  return function(var_args) {
    var args = leftArgs.concat(Array.slice(arguments, 0));
    return thisFunc.apply(self, args);
  };
};

Collectives™ on Stack Overflow

How can I get an object inside a javascript event handler?

3 Answers 3

Comments

1 Comment

Added for completeness

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Added for completeness

Comments

Your Answer

Sign up or log in

Post as a guest

Related