클릭 기능에서 하나의 요소만 선택되도록 하려면 어떻게 해야 합니까? (순수 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 리스너를 선언하세요. 답이 들어 있는 변수가 비어 있지 않으면 답을 확인하세요.

으아악

위 코드를 사용하면 프런트엔드에서 다른 카드를 클릭할 때 다른 카드를 "선택 취소"할 수 없지만(원하는 경우) 쉽게 해결할 수 있습니다.