forEach 内の addEventListener の挙動がよくわかりません

2021年4月5日
ユーザー

お世話になっております。
確かに、今回は以下の関数で forEachの中でaddEventListenerが指定されており、
解釈が難しいです。

    function setQuiz(){
        isAnswered = false;
        question.textContent = quizSet[currentNum].q;

        const shuffledChoices = shuffle([...quizSet[currentNum].c]);
        shuffledChoices.forEach((choice)=>{
            const li = document.createElement('li');
            li.textContent = choice;
            li.addEventListener('click',() => {
                checkAnswer(li);
            });
            choices.appendChild(li);
        });
    }

これは、最終行の setQuiz();が実行された時点では、li.addEventListenerでは
checkAnswer(li); という関数が指定されただけと考えて良いのでしょうか?

そして、最初のクリックが起きた時点で実行される checkAnswer(li);
isAnsweredという変数が falseに変化する。
二度目のクリックでも checkAnswer(li); は実行されるけど、以下の21行目の
isAnswered = true; 以降は実行されない。このような解釈で良いでしょうか?

    function checkAnswer(li){
        if(isAnswered){
            return;
        }
        isAnswered = true;

        if(li.textContent === quizSet[currentNum].c[0]){
            li.classList.add('correct');
        }else {
            li.classList.add('wrong');
        }
    }

この回答を見るにはプレミアムサービスへの登録が必要です

プレミアムサービスとは?