如何在我的點擊功能中只允許選擇一個元素？ （純JS）

Question

我正在創建一個測驗應用程序，它從API 中提取數據，構建一系列問題，然後每次在測驗頁面上加載不同數量的“答案元素”，具體取決於從數組中隨機選擇的問題.

以下是建立一系列可點擊的「玩家卡」的功能，這些卡片是 CSS 卡樣式的有效答案。這個想法是用戶選擇一張卡，然後點擊檢查按鈕來運行該功能以檢查是否正確。

除了一件事之外，該功能運作良好。用戶可以選擇所有卡片。

我遇到的問題是，您可以單擊所有答案，它們都會獲得 CSS 類，並且資料會傳遞給所有選定的卡片/答案。

我只想讓使用者選擇一個答案。他們可以點擊任何卡片，然後改變主意，但他們只能選擇一個答案，然後依次處理答案檢查功能。

我不知道該怎麼做？誰能幫助我理解我需要如何更改此程式碼才能實現這一點？

function addClickEvent(answers) {
  const playerCard = document.querySelectorAll(".player-card");
  for (i = 0; i < playerCard.length; i++) {
    playerCard[i].setAttribute("id", [i]);
    playerCard[i].addEventListener("click", (e) => {
      clickedPlayer = e.target;
      clickedPlayer.classList.add("border-lime-500");
      clickedPlayer.classList.add("border-8");
      let userAnswer = answers[clickedPlayer.id];
      
      checkButton.addEventListener("click", () => {
        checkAnswer(userAnswer, answers);
      });
    });
  }
}

Answer 1

將答案儲存在比偵聽器範圍更大的變數中。每當提交任何答案時，變數都會被覆蓋。然後宣告一個單獨的 checkButton 監聽器。如果變數保存的答案不為空，請檢查答案。

function addClickEvent(answers) {
  const playerCard = document.querySelectorAll(".player-card");
  let userAnswer = null;
  
  for (i = 0; i < playerCard.length; i++) {
    playerCard[i].setAttribute("id", [i]);
    playerCard[i].addEventListener("click", (e) => {
      clickedPlayer = e.target;
      clickedPlayer.classList.add("border-lime-500");
      clickedPlayer.classList.add("border-8");
      userAnswer = answers[clickedPlayer.id];
    });
  }
  
  checkButton.addEventListener("click", () => {
        if(!userAnswer) return alert("Select an answer first!");
        checkAnswer(userAnswer, answers);
   });
}

上面的程式碼不會讓前端在點擊其他卡片時「取消選擇」這些卡片（如果您也想要的話），但這是一個簡單的修復。