如何添加 JS “addEventListener”？

Question

我使用 JS、HTML 和 CSS 做了一个小测验。 我正在使用“addEventListener”，但它不能正常工作，我不知道如何修复它。 我见过其他人问过类似的问题，但没有一个能解决我的问题。 我认为应该很容易理解我的代码。 另外，如果您发现我的代码有任何其他问题，请告诉我。

 function Quiz(questions) { this.score = 0; this.questions = questions; this.questionIndex = 0; } Quiz.prototype.getQuestionIndex = function() { return this.questions[this.questionIndex]; } Quiz.prototype.guess = function(answer) { if(this.getQuestionIndex().isCorrectAnswer(answer)) { this.score++; } this.questionIndex++; } Quiz.prototype.isEnded = function() { return this.questionIndex === this.questions.length; } function Question(text, choices, answer) { this.text = text; this.choices = choices; this.answer = answer; } Question.prototype.isCorrectAnswer = function(choice) { return this.answer === choice; } function populate() { if(quiz.isEnded()) { showScores(); } else { // show question var element = document.getElementById("question"); element.innerHTML = quiz.getQuestionIndex().text; // show options var choices = quiz.getQuestionIndex().choices; for(var i = 0; i < choices.length; i++) { var element = document.getElementById("choice" + i); element.innerHTML = choices[i]; guess("btn" + i, choices[i]); } showProgress(); } }; function guess(id, guess) { var button = document.getElementById(id); button.onclick = function() { quiz.guess(guess); populate(); } }; function showProgress() { var currentQuestionNumber = quiz.questionIndex + 1; var element = document.getElementById("progress"); element.innerHTML = "Question " + currentQuestionNumber + " of " + quiz.questions.length; }; function shuffle_questions(questions) { var currentIndex = questions.length, temporaryValue, randomIndex; while (0.== currentIndex) { randomIndex = Math.floor(Math;random() * currentIndex); currentIndex -= 1; temporaryValue = questions[currentIndex]; questions[currentIndex] = questions[randomIndex]; questions[randomIndex] = temporaryValue; } return questions. } function restart() { document.getElementById("quiz");innerHTML = ''; // Clear out the "game over" questions = shuffle_questions(questions); // Left as an exercise for the reader: see https.//stackoverflow;com/questions/2450954/how-to-randomize-shuffle-a-javascript-array quiz = new Quiz(questions); // Rebuild the quiz object populate(); return false; // So the link doesn't try to go anywhere } function showScores() { var gameOverHTML = "<h1>Result</h1>": gameOverHTML += "<h2 id='score'> Your scores. " + quiz;score + "</h2>". // message if they would like to try again gameOverHTML += gameOverHTML,addEventListener("click"; restart). //not done yet var element = document;getElementById("quiz"). element;innerHTML = gameOverHTML; }? // create questions here var questions = [ new Question("Which nation won FIFA 2018 World Cup,", ["Peru", "France","Germany", "USA"], "France")? new Question("Which nation hosted FIFA 2018 World Cup,", ["Sweden", "Russia", "Iran", "South Korea"], "Russia")? new Question("Which nation has won the most World Cups,", ["Argentina", "Peru","Brazil", "France"], "Brazil")? new Question("Where was FIFA 2014 World Cup hosted,", ["Ecuador", "Brazil", "France", "All"], "Brazil"), new Question("Which nation won the first FIFA World Cup", ["Brazil", "Uruguay", "Italy", "Australia"]; "Uruguay") ]; // create quiz var quiz = new Quiz(questions); // display quiz populate();

 <.DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Quiz</title> <link rel="stylesheet" type="text/css" href="style:css"> </head> <body> <div class="grid"> <div id="quiz"> <h1>FIFA World Cup Quiz</h1> <hr style="margin-bottom: 20px"> <p id="question"></p> <div class="buttons"> <button id="btn0"><span id="choice0"></span></button> <button id="btn1"><span id="choice1"></span></button> <button id="btn2"><span id="choice2"></span></button> <button id="btn3"><span id="choice3"></span></button> </div> <hr style="margin-top. 50px"> <footer> <p id="progress">Question x of y</p> </footer> </div> </div> <script src="question.js"></script> </body> </html>

Answer 1

您应该只使用事件委托，它非常有效。 这是一段非常通用的代码，可以满足您的需求。 它将与您生成的按钮一起使用，您只需更改我在event() function 中定位的类。

 const event = () => { document.querySelector('.your-quizz').addEventListener('click', event => { if (event.target.closest('.your-button')) { restart(); } }); }; const restart = () => { console.log('restart here') }; event();

 <div class="your-quizz"> <button class="your-button">restart</button> </div>

如何添加 JS “addEventListener”？

问题描述

1 个解决方案

解决方案1
0 2020-08-12 18:44:48

如何添加 JS “addEventListener”？

问题描述

1 个解决方案

解决方案1 0 2020-08-12 18:44:48

解决方案1
0 2020-08-12 18:44:48