我正在創建一個測驗應用程序，它從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);
});
});
}
} 
將答案儲存在比偵聽器範圍更大的變數中。每當提交任何答案時，變數都會被覆蓋。然後宣告一個單獨的
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); }); }上面的程式碼不會讓前端在點擊其他卡片時「取消選擇」這些卡片（如果您也想要的話），但這是一個簡單的修復。