Bagaimanakah saya boleh membenarkan hanya satu elemen dipilih dalam fungsi klik saya? (JS tulen)

Question

Saya sedang mencipta apl kuiz yang menarik data daripada API, membina satu siri soalan, dan kemudian memuatkan bilangan "elemen jawapan" yang berbeza pada halaman kuiz setiap kali, bergantung pada soalan yang dipilih secara rawak daripada tatasusunan.

Di bawah ialah fungsi untuk mencipta satu siri "kad pemain" boleh klik yang merupakan jawapan yang berkesan untuk penggayaan kad CSS. Ideanya ialah pengguna memilih kad dan kemudian mengklik butang semak untuk menjalankan fungsi untuk menyemak sama ada ia betul.

Ciri ini berfungsi dengan baik kecuali untuk satu perkara. Pengguna boleh memilih semua kad.

Masalah yang saya ada ialah anda boleh mengklik pada semua jawapan dan semuanya mendapat kelas CSS dan data dihantar ke semua kad/jawapan yang dipilih.

Saya hanya mahu pengguna memilih satu jawapan. Mereka boleh mengklik pada mana-mana kad dan kemudian mengubah fikiran mereka, tetapi mereka hanya boleh memilih jawapan dan kemudian meneruskan melalui ciri semakan jawapan.

Saya tak tahu nak buat apa? Bolehkah sesiapa membantu saya memahami bagaimana saya perlu menukar kod ini untuk mencapai ini?

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

Simpan jawapan dalam pembolehubah dengan skop yang lebih besar daripada pendengar. Setiap kali sebarang jawapan diserahkan, pembolehubah akan ditimpa. Kemudian isytiharkan pendengar checkButton yang berasingan. Jika pembolehubah yang memegang jawapan tidak kosong, semak jawapannya.

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

Kod di atas tidak akan membenarkan bahagian hadapan "nyahpilih" kad lain apabila ia diklik (jika anda mahu begitu juga), tetapi ia adalah penyelesaian yang mudah.