将带有参数的函数传递给`addEventListener`

Question

I'm trying to create a single function that works for multiple selections. I'm creating a selection screen of a video game that should work like this: https://oege.ie.hva.nl/~meestej005/eind/

The way I achieved this was with this code:

function character1(){
for (var i = 0; i < sprite.length; i++){
    sprite[i].classList.remove('charSprite');
}
sprite[0].classList.add('charSprite');
hadouken.play();
}

I made this function 4 times, one for each character. They are called with this:

char1.addEventListener('click', character1);

Right now, I want to create a function that does this for each character. This is what I came up with:

function character(name, music){
for (var i = 0; i < sprite.length; i++){
    sprite[i].classList.remove('charSprite');
}
name.classList.add('charSprite');
music.play();
}

char1.addEventListener('click', character(charSprite1, hadouken));

Sadly, this doens't work. Clicking one of the characters now results into absolutely nothing, not even an error. So I'm doing something wrong, but have no idea what. I want to fix this using only Javascript. I hope you guys can help me out. Thanks.

Answer 1

addEventListener takes a function as its second argument. When you invoke the function like character(charSprite1, hadouken) , you are no longer passing that function reference around (instead, you are passing the result of that function, which is being called immediately rather than when an event fires). I would suggest capturing the name and music arguments using closure, and returning a function each time from character :

function character(name, music) {
  return function() {
    for (var i = 0; i < sprite.length; i++) {
      sprite[i].classList.remove('charSprite');
    }
    name.classList.add('charSprite');
    music.play();
  }
}

char1.addEventListener('click', character(charSprite1, hadouken));