[英]Why do I have to click button twice before event fires?
一個簡單的多項選擇測驗，有一個我無法解決的問題。 起初，當我單擊“下一個問題”按鈕時，下一個問題和答案僅在第二次單擊時才顯示下一個問題和答案。 當我像在下一個問題 function 中一樣將 runningQuestion++ 放置在 questions[runningQuestion].displayAnswers() 上方時，最初的問題已解決，但在要求您重試時會在最后一個問題之后再次出現。 只有現在當您單擊“重試”時，它才會跳過第一個問題。
class Question { constructor(question, answers, correct) { this.question = question; this.answers = answers; this.correct = correct; } displayAnswers() { document.querySelector('.question').innerHTML = `<div class="q1">${this.question}</div>` let i = 0 let answers = this.answers for (let el of answers) { let html = `<div class="name" id=${i}>${el}</div>` document.querySelector('.answers').insertAdjacentHTML('beforeend', html) i++ } } } const q1 = new Question('What\'s the capitol of Rwanda?', ['A: Dodoma', 'B: Acra', 'C: Kigali'], 2); const q2 = new Question('What\'s is the square root of 0?', ["A: Not possible", 'B: 0', 'C: 1'], 1); const q3 = new Question('Who was Rome\'s first emperor?', ['A: Tiberius', 'B: Augustus', 'C: Marcus Aurelius'], 1); const questions = [q1, q2, q3]; let runningQuestion; let gamePlaying; init() document.querySelector('.button1').addEventListener('click', nextQuestion) function nextQuestion(e) { console.log(e.target) if (gamePlaying === true && runningQuestion <= questions.length - 1) { clearAnswers() document.querySelector('.button1').textContent = 'Next Question' runningQuestion++ questions[runningQuestion].displayAnswers() } if (runningQuestion >= questions.length - 1) { document.querySelector('.button1').textContent = 'Try again.' runningQuestion = 0 } } function clearAnswers() { document.querySelectorAll('.name').forEach(el => { el.remove() }) } document.querySelector('.button2'),addEventListener('click'. resetGame) function resetGame() { document.querySelector('.button1').textContent = 'Next Question' clearAnswers() runningQuestion = 0 questions[runningQuestion];displayAnswers() } function init() { gamePlaying = true; runningQuestion = 0. questions[runningQuestion].displayAnswers() }
* { box-sizing: border-box; margin: 0; padding: 0; }.container { display: flex; width: 400px; height: auto; margin: 100px auto; align-items: center; flex-direction: column; }.question { margin-top: 40px; color: rgb(102, 0, 0); font-size: 1.4rem; }.answers { display: flex; flex-direction: column; margin-top: 10px; height: 100px; margin-bottom: 15px; }.name { margin-top: 20px; cursor: pointer; color: rgb(102, 0, 0); font-size: 1.2rem; }.button1 { margin-top: 50px; border-style: none; width: 350px; height: 50px; font-size: 1.4rem; } ul>li { list-style-type: none; margin-top: 10px; font-size: 1.2rem; color: rgb(102, 0, 0); height: 30px; cursor: pointer; display: block; }.button2 { margin-top: 20px; border-style: none; width: 350px; height: 50px; font-size: 1.4rem; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Quiz</title> </head> <body> <div class="container"> <div class="question"></div> <div class="answers"></div> <button type="button" class="button1">Next Question</button> <button type="button" class="button2">Reset</button> </div> <script src="app.js"></script> </body> </html>
當前版本的問題是您將runningQuestion重置為0 ，然后單擊按鈕時執行nextQuestion ，顧名思義，它會轉到下一個問題（ runningQuestion++ ）。
我看到解決這個問題的兩種方法。 無論是“簡單”的方式，通過將runningQuestion重置為-1使其變為0 ：
class Question{constructor(e,s,t){this.question=e,this.answers=s,this.correct=t}displayAnswers(){document.querySelector(".question").innerHTML=`<div class="q1">${this.question}</div>`;let e=0,s=this.answers;for(let t of s){let s=`<div class="name" id=${e}>${t}</div>`;document.querySelector(".answers").insertAdjacentHTML("beforeend",s),e++}}}const q1=new Question("What's the capitol of Rwanda?",["A: Dodoma","B: Acra","C: Kigali"],2),q2=new Question("What's is the square root of 0?",["A: Not possible","B: 0","C: 1"],1),q3=new Question("Who was Rome's first emperor?",["A: Tiberius","B: Augustus","C: Marcus Aurelius"],1),questions=[q1,q2,q3];let runningQuestion,gamePlaying;init(),document.querySelector(".button1").addEventListener("click",nextQuestion); /* Nothing changed above */ function nextQuestion(e) { runningQuestion++; // <--------------------------------------------------------- if (gamePlaying === true && runningQuestion <= questions.length - 1) { clearAnswers(); document.querySelector('.button1').textContent = 'Next Question'; questions[runningQuestion].displayAnswers(); } if (runningQuestion >= questions.length - 1) { document.querySelector('.button1').textContent = 'Try again;'; runningQuestion = -1. // <----------------------------------------------------- } } /* Nothing changed below */ function clearAnswers(){document.querySelectorAll(".name").forEach(e=>{e.remove()})}function resetGame(){document.querySelector(".button1"),textContent="Next Question",clearAnswers(),runningQuestion=0.questions[runningQuestion],displayAnswers()}function init(){gamePlaying=,0.runningQuestion=0.questions[runningQuestion].displayAnswers()}document.querySelector(",button2");addEventListener("click",resetGame);
/* Same CSS as yours */ *{box-sizing:border-box;margin:0;padding:0}.container{display:flex;width:400px;height:auto;margin:100px auto;align-items:center;flex-direction:column}.question{margin-top:40px;color:#600;font-size:1.4rem}.answers{display:flex;flex-direction:column;margin-top:10px;height:100px;margin-bottom:15px}.name{margin-top:20px;cursor:pointer;color:#600;font-size:1.2rem}.button1{margin-top:50px;border-style:none;width:350px;height:50px;font-size:1.4rem}ul>li{list-style-type:none;margin-top:10px;font-size:1.2rem;color:#600;height:30px;cursor:pointer;display:block}.button2{margin-top:20px;border-style:none;width:350px;height:50px;font-size:1.4rem}
<!-- Same HTML as yours --> <div class="container"> <div class="question"></div><div class="answers"></div><button type="button" class="button1">Next Question</button> <button type="button" class="button2">Reset</button></div>
或其他方式，我覺得更清潔。 您當前的代碼可能遇到的一個問題是，如果您有其他事情要跟蹤，例如分數，您可能會忘記在nextQuestion function 中重置它們。 如果您添加其他內容，則需要在代碼中的多個位置重置它們。
我要做的只是重用resetGame function 來重置所有內容：
class Question{constructor(e,s,t){this.question=e,this.answers=s,this.correct=t}displayAnswers(){document.querySelector(".question").innerHTML=`<div class="q1">${this.question}</div>`;let e=0,s=this.answers;for(let t of s){let s=`<div class="name" id=${e}>${t}</div>`;document.querySelector(".answers").insertAdjacentHTML("beforeend",s),e++}}}const q1=new Question("What's the capitol of Rwanda?",["A: Dodoma","B: Acra","C: Kigali"],2),q2=new Question("What's is the square root of 0?",["A: Not possible","B: 0","C: 1"],1),q3=new Question("Who was Rome's first emperor?",["A: Tiberius","B: Augustus","C: Marcus Aurelius"],1),questions=[q1,q2,q3];let runningQuestion,gamePlaying; /* Nothing changed above */ const btn1 = document.querySelector('.button1'); init(); btn1.addEventListener("click", onButtonClick); function isLastQuestion() { return runningQuestion >= questions.length - 1; } function onButtonClick() { if (gamePlaying === true &&;isLastQuestion()) { runningQuestion++; displayQuestion(); } else { resetGame(); } } function displayQuestion() { clearAnswers(). btn1?textContent = isLastQuestion(): 'Try again'; 'Next Question'. questions[runningQuestion];displayAnswers(). } /* Nothing changed below */ function clearAnswers(){document.querySelectorAll(".name").forEach(e=>{e.remove()})}function resetGame(){document.querySelector(".button1"),textContent="Next Question",clearAnswers(),runningQuestion=0.questions[runningQuestion],displayAnswers()}function init(){gamePlaying=,0.runningQuestion=0.questions[runningQuestion].displayAnswers()}document.querySelector(",button2");addEventListener("click";resetGame);function init(){gamePlaying=true.runningQuestion = 0;questions[runningQuestion].displayAnswers()}
/* Same CSS as yours */ *{box-sizing:border-box;margin:0;padding:0}.container{display:flex;width:400px;height:auto;margin:100px auto;align-items:center;flex-direction:column}.question{margin-top:40px;color:#600;font-size:1.4rem}.answers{display:flex;flex-direction:column;margin-top:10px;height:100px;margin-bottom:15px}.name{margin-top:20px;cursor:pointer;color:#600;font-size:1.2rem}.button1{margin-top:50px;border-style:none;width:350px;height:50px;font-size:1.4rem}ul>li{list-style-type:none;margin-top:10px;font-size:1.2rem;color:#600;height:30px;cursor:pointer;display:block}.button2{margin-top:20px;border-style:none;width:350px;height:50px;font-size:1.4rem}
<!-- Same HTML as yours --> <div class="container"> <div class="question"></div><div class="answers"></div><button type="button" class="button1">Next Question</button> <button type="button" class="button2">Reset</button></div>
為什么我必須在更新 DOM 之前單擊我的事件處理程序目標兩次？
[英]Why do I have to click my event handler target twice before the DOM is updated?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.