關於問答游戲中的事件監聽器

Question

我的問答游戲有問題。 如果我想用一個問題和 4 個選項刷新第一頁，我想知道是否需要一個事件監聽器。 那會是什么樣子？ 我正在使用 json 來存儲所有問題。

javascript 我的選項和第一頁的問題：

let question = document.getElementById("question").innerHTML = quiz.quests[0].question; let answer1 = document.getElementById("answer1").innerHTML = quiz.quests[0].answer[0].alt; let answer2 = document.getElementById("answer2").innerHTML = quiz.quests[0].answer[1].alt; let answer3 = document.getElementById("answer3").innerHTML = quiz.quests[0].answer[2].alt; let answer4 = document.getElementById("answer4").innerHTML = quiz.quests[0].answer[3].alt;

<div id="wrapper_questions">
<div class="background">
    <div class="grid">
        <div id="question">
            <h1></h1>
        </div>
        <hr style="margin-bottom: 20px">

        <div id="choices">
            <input type="checkbox" id="choice1"><span id="answer1"></span>
            <br>
            <input type="checkbox" id="choice2"><span id="answer2"></span>
            <br>
            <input type="checkbox" id="choice3"><span id="answer3"></span>
            <br>
            <input type="checkbox" id="choise4"><span id="answer4"></span>
        </div>
        <hr style="margin-bottom: 50px">

        <button onclick="nextQuestion()" >Next</button>
        <br>
        <footer>
                <p  id="progress">Question x of y.</p>
        </footer>
    </div>
</div>

Answer 1

這是一個事件偵聽器，它只是在選擇一個選項時發出警報。 也許這將幫助您入門。

 let choices = document.getElementById("choices"); choices.addEventListener('click', (event)=> { console.log(event.target.id); });

 <div id="wrapper_questions"> <div class="background"> <div class="grid"> <div id="question"> <h1></h1> </div> <hr style="margin-bottom: 20px"> <div id="choices"> <input type="radio" id="choice1" name="choiceForQuestion1"><span id="answer1">Answer 1</span> <br> <input type="radio" id="choice2" name="choiceForQuestion1"><span id="answer2">Answer 2</span> <br> <input type="radio" id="choice3" name="choiceForQuestion1"><span id="answer3">Answer 3</span> <br> <input type="radio" id="choise4" name="choiceForQuestion1"><span id="answer4">Answer 4</span> </div> <hr style="margin-bottom: 50px"> <button onclick="nextQuestion()">Next</button> <br> <footer> <p id="progress">Question x of y.</p> </footer> </div> </div>

但是，如果選擇是互斥的，我會使用收音機而不是復選框。