Pass variable to addEventListener

pdknsk

Expand|Select|Wrap|Line Numbers

 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.

Expand|Select|Wrap|Line Numbers

 function addValue () { 

   var field = document.getElementById('bar').innerHTML;

   document.getElementById('bar').innerHTML =  field + 'Value=5';

}
 
document.getElementById('foo').addEventListener('click', addValue, false);

Dormilich

Quote:

Originally Posted by pdknsk

Works perfectly when no variable is passed.

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)

Expand|Select|Wrap|Line Numbers

 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.

Expand|Select|Wrap|Line Numbers

 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

Quote:

Originally Posted by pdknsk

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

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

Quote:

Originally Posted by pdknsk

without passing a variable to addEventListener.

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

Pass variable to addEventListener

re: Pass variable to addEventListener

re: Pass variable to addEventListener

re: Pass variable to addEventListener

re: Pass variable to addEventListener

re: Pass variable to addEventListener

re: Pass variable to addEventListener

re: Pass variable to addEventListener

re: Pass variable to addEventListener

re: Pass variable to addEventListener

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about