Comment puis-je autoriser la sélection d'un seul élément dans ma fonction de clic ? (JS pur)

Question

Je crée une application de quiz qui extrait les données d'une API, crée une série de questions, puis charge à chaque fois un nombre différent d'"éléments de réponse" sur la page du quiz, en fonction de la question sélectionnée au hasard dans le tableau.

Vous trouverez ci-dessous la fonctionnalité permettant de créer une série de "cartes de joueur" cliquables qui constituent une réponse efficace au style des cartes CSS. L'idée est que l'utilisateur sélectionne une carte puis clique sur le bouton de vérification pour exécuter la fonction afin de vérifier si elle est correcte.

La fonctionnalité fonctionne bien sauf pour une chose. Les utilisateurs peuvent sélectionner toutes les cartes.

Le problème que j'ai est que vous pouvez cliquer sur toutes les réponses et elles obtiennent toutes la classe CSS et les données sont transmises à toutes les cartes/réponses sélectionnées.

Je veux juste que l'utilisateur choisisse une réponse. Ils peuvent cliquer sur n’importe quelle carte puis changer d’avis, mais ils ne peuvent sélectionner qu’une réponse, puis passer par la fonction de vérification des réponses.

Je ne sais pas quoi faire ? Quelqu'un peut-il m'aider à comprendre comment je dois modifier ce code pour y parvenir ?

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

Stockez la réponse dans une variable avec une portée plus grande que celle de l'auditeur. Chaque fois qu'une réponse est soumise, la variable sera écrasée. Déclarez ensuite un auditeur checkButton distinct. Si la variable contenant la réponse n'est pas vide, vérifiez la réponse.

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

Le code ci-dessus ne permettra pas au frontend de "désélectionner" les autres cartes lorsque vous cliquez dessus (si vous le souhaitez aussi), mais c'est une solution simple.