Question

I’ll keep this short – I’ve got a list of buttons, that I create using a loop, and when one of them gets clicked I want to be able to pass its id attribute to another file in order to dynamically generate a new page.

Here’s the code:

for (var i in data.contacts) {  
    var temp = document.createElement('div'); 
    temp.className = "contacts"; 
    var dude = document.createElement('input');
    dude.type = "button"; 
    dude.value = data.contacts[i];
    dude.id = data.contacts[i]; 
    dude.className = "dude_button" + data.contacts[i]; 

    dude.addEventListener('click', function(event) { gotoProfile(dude.id); }, false); 


    temp.appendChild(dude); 
    temp.appendChild(document.createElement('br'));
    theDiv.appendChild(temp); 

}
// and now in another file, there's gotoProfile():

function gotoProfile(x) {
var username = document.getElementById(x).value;  

if (xmlHttp) {
    try { 
.... etc.

Now see this works, sort of, but the problem is that when I click any button, it only passes the last dude.id value from the list data.contacts. Obviously I want every button’s addEventListener to pass its own data.contacts[i] value, instead of just the last one.

Help appreciated, thanks guys.

Answer 1

Because JavaScript has no block scope, dude will refer to the last assigned element (because the loop finished) when the event handler is called. You have to capture the reference to the current dude by e.g. using an immediate function:

dude.addEventListener('click', (function(d) {
    return function(event) { 
        gotoProfile(d.id); 
    }
}(dude)), false);

This is a common error when creating functions in a loop.

---

But you can make it even easier. The event object has a property target that points to the element the event was raised on. So you can just do:

dude.addEventListener('click', function(event) { 
    gotoProfile(event.target.id); 
}, false); 

And with that said, you don’t need to add a handler for every button. As you are doing the same for every button, you could attach the same event handler above to the parent of the buttons (or a common ancestor) and it would still work. You just have to filter out the clicks that don’t happen on a button:

parent.addEventListener('click', function(event) { 
    if(event.target.nodeName == 'INPUT' && event.target.type == "button") {
        gotoProfile(event.target.id); 
    }
}, false);