問答游戲：如何只允許輸入一個答案？

Question

我正在做一個問答游戲，現在我正試圖了解如何在點擊一個選項后刪除另一個選項的 select 功能。 截至目前，當你點擊一個答案時，如果它是正確的，它會亮起綠色，或者錯誤的答案會亮起紅色，同時也會點亮正確的答案。 但問題是我仍然可以點擊其他選項，它們會突出顯示為紅色。 誰能幫我這個？

存儲庫： https://github.com/JacobPacheco100/Quiz-Games

// BTN OPTION EVENT

options.forEach((op) => {
  op.addEventListener("click", (e) => {
    const choice = e.currentTarget;
    const choiceClass = e.currentTarget.classList;

    if (choiceClass.contains(answerList[currentQuestion])) {
      choice.style.backgroundColor = "green";
    } else {
      choice.style.backgroundColor = "red";
    }

    correct();
  });
});

// HIGHLIGHT CORRECT OPTION

function correct() {
  options.forEach((op) => {
    if (op.classList.contains(answerList[currentQuestion])) {
      op.style.backgroundColor = "green";
    }
  });
}

Answer 1

我認為，您應該在 html 文件中使用“radio”類型<input />作為選項。 它將阻止 select 多個選項。 記得也要更新 javascript。 詢問您是否不清楚。

Answer 2

1.去掉AddEventListener里面的匿名function

2.移動代碼，在匿名 function 里面 命名為 function

3. 如果答案正確，移除 EventListener

const checkAnswer = (e) => {


    const choice = e.currentTarget;
    const choiceClass = e.currentTarget.classList;

    if (choiceClass.contains(answerList[currentQuestion])) {
      choice.style.backgroundColor = "green";
    } else {
      choice.style.backgroundColor = "red";
    }

    correct();

}


options.forEach((op) => {
  op.addEventListener("click", checkAnswer);
});

// HIGHLIGHT CORRECT OPTION

function correct() {
  options.forEach((op) => {
    if (op.classList.contains(answerList[currentQuestion])) {
      op.style.backgroundColor = "green";
      op.removeEventListener("click", checkAnswer)
    }
  });
}