引数を持つ関数を `addEventListener`に渡す

Question

私は複数の選択に対して機能する単一の関数を作成しようとしています。私はこのように動作するはずのビデオゲームの選択画面を作成しています：https://oege.ie.hva.nl/~meestej005/eind/

私は、これは、このコードでいた達成する方法を：

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

私はこの機能を4回、各文字の1を作りました。

char1.addEventListener('click', character1); 

今は、各文字に対してこれを行う関数を作成したいと考えています。これは私が思いついたものです：

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)); 

悲しいことに、これは動作しません。文字の1つをクリックすると、エラーは発生しません。だから私は何か間違っているが、何が分からないのか。私はJavascriptだけを使ってこれを修正したいと思います。私はあなたが私を助けてくれることを願っています。ありがとう。

Answer 1

addEventListenerは、2番目の引数として関数をとります。 character(charSprite1, hadouken)のような関数を呼び出すと、その関数参照をもう通さなくなります（その代わりに、イベントが発生したときではなく、というすぐにと呼ばれるその関数の結果を渡しています）。

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));