Pass variable to addEventListener

[pdknsk]

function addValue (i) { 
   var field = document.getElementById('bar').innerHTML;
   document.getElementById('bar').innerHTML =  field + 'Value=' + i;
}
 
document.getElementById('foo').addEventListener('click', addValue(5), false);

This is supposed to add Value=5 once the element is clicked but instead it adds Value=5 when the page loads, and doesn't react to clicks.

Works perfectly when no variable is passed.

function addValue () { 
   var field = document.getElementById('bar').innerHTML;
   document.getElementById('bar').innerHTML =  field + 'Value=5';
}
 
document.getElementById('foo').addEventListener('click', addValue, false);

[Dormilich]

@pdknsk
yupp, that’s how addEventListener() works (see ref.), you pass a function reference (aka the function name). you have to use a closure to pass functions with parameters.

[pdknsk]

Thanks. How would I do this?

[Dormilich]

(about Closures)

var aClosure = function() {
    addValue(5);
}
// or
function aClosure() {
    addValue(5);
}
 
 element.addEventListener("click", aClosure);

[pdknsk]

Thanks, this works for passing variables, but there is still a minor problem. It seems the passed variable is not registered or stored with the Listener when it is created, but only when the click event is executed.

This shows Value=5 for all foo_* but is supposed to show Value=1 for foo_1 and so forth.

function addValue(i) { 
    var field = document.getElementById('bar').innerHTML;
    document.getElementById('bar').innerHTML =  field + 'Value=' + i';
}
 
for (k=0;k<5;k++) {
    function addValueExt() {
        addValue(k);
    }
    document.getElementById('foo_'+k).addEventListener('click', addValueExt, false);
}

[Dormilich]

@pdknsk
nope, that’s not how Closures work. Closures are named as such because they preserve variable values from outside scope. in your case the function addValueExt is called (via reference) on the event and at that time, the variable k always has the value 5 (because the loop already finished).

[pdknsk]

I'll have to figure out a way to pass the corresponding value then.

[Dormilich]

save the value in the HTMLElement and access this value from inside the addValue function.

[pdknsk]

I solved this using a similar method, without passing a variable to addEventListener.

[Dormilich]

@pdknsk
as you already noticed, you can’t pass variables to addEventListener…