Wie kann ich zulassen, dass in meiner Klickfunktion nur ein Element ausgewählt wird? (Reines JS)

Question

Ich erstelle eine Quiz-App, die Daten von einer API abruft, eine Reihe von Fragen erstellt und dann jedes Mal eine andere Anzahl von „Antwortelementen“ auf die Quizseite lädt, je nachdem, welche Frage zufällig aus dem Array ausgewählt wird.

Nachfolgend finden Sie die Funktionalität zum Erstellen einer Reihe anklickbarer „Spielerkarten“, die eine funktionierende Antwort auf das CSS-Kartendesign darstellen. Die Idee besteht darin, dass der Benutzer eine Karte auswählt und dann auf die Schaltfläche „Prüfen“ klickt, um die Funktion auszuführen und zu prüfen, ob sie korrekt ist.

Die Funktion funktioniert bis auf eine Sache gut. Benutzer können alle Karten auswählen.

Das Problem, das ich habe, ist, dass man auf alle Antworten klicken kann und alle die CSS-Klasse erhalten und die Daten an alle ausgewählten Karten/Antworten weitergegeben werden.

Ich möchte nur, dass der Benutzer eine Antwort auswählt. Sie können auf eine beliebige Karte klicken und dann ihre Meinung ändern, aber sie können nur eine Antwort auswählen und dann mit der Funktion zur Antwortüberprüfung fortfahren.

Ich weiß nicht, was ich tun soll? Kann mir jemand helfen zu verstehen, wie ich diesen Code ändern muss, um dies zu erreichen?

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

上面的代码不会让前端在单击其他卡片时“取消选择”这些卡片（如果您也想要的话），但这是一个简单的修复。