Passing a variable to an addEventListener function

Question

I am having troubles trying to figure out why this code does not run. I get no error in the console at all.

const remove = saClass => {
  document.getElementsByClassName('site-alert')[0].remove();
};

const sitealert = ({message = 'Default message', dismissText = 'Close', className = 'site-alert'}) => {
  render(`<div id="sitealert" class="${className}">${message}<button id='close-message'>${dismissText}</button><div>`);
  document.getElementById('close-message').addEventListener('click', remove(className), false);
};

export const init = (options) => sitealert(options);

When i add a parameter remove(className) to the addEventListener the code does not run at all and I get no error in the console.

If I remove the parameter it all works fine.

Am i passing a variable incorrectly?

I should note that I am using babel to convert the code into a UMD format.

Thanks, Dave

Possible duplicate of [How to pass arguments to addEventListener listener function?](http://stackoverflow.com/questions/256754/how-to-pass-arguments-to-addeventlistener-listener-function) — Silom, Jun 28 '16 at 13:42

score 2 · Answer 1 · answered Jun 28 '16 at 13:44

You can use a closure to pass in the variable and then return the actual callback:

const sitealert = ({message = 'Default message', dismissText = 'Close', className = 'site-alert'}) => {
  render(`<div id="sitealert" class="${className}">${message}<button id='close-message'>${dismissText}</button><div>`);
  document.getElementById('close-message').addEventListener('click', remove(className), false);
};

function remove(yourVar) {
    return function (e) {
        //yourVar is available here
    }
}

score 0 · Answer 2 · answered Jun 28 '16 at 13:39

0

An expression like

functionName(expression)

is a call to the function. What you want is another function. You can do that explicitly:

() => remove(className)

or with .bind():

remove.bind(null, className)

answered Jun 28 '16 at 13:39

Pointy

405,095
59
585
614

score 0 · Answer 3 · answered Jun 28 '16 at 13:40

The second argument of addEventListener needs to be a function.

remove is a function.

remove(className) is the result of calling that function with an argument. Since the function has no return statement, that result is undefined.

If you want to generate a function that will call remove with an argument, use bind.

remove.bind(null, className)

score 0 · Answer 4 · answered Jun 28 '16 at 13:46

0

If you have a fonction with parameters, you should use:

.addEventListener('onclick', function() {remove(className)}, true);

in order to specify its a function

answered Jun 28 '16 at 13:46

Gaetan

325
1
15

Passing a variable to an addEventListener function

4 Answers4