无法让我的测验应用程序工作

Question

我正在 http://javascriptissexy.com/how-to-learn-javascript-properly/ 上做 "Learn JavaScript Properly" 曲目。

我花了很长时间，但我终于想出了如何进入下一个问题，但选择没有改变。

但是，当我对 "questionIndex" 进行硬编码时，问题和选择工作正常。

无论如何，这是我的代码（我知道它有点乱，我是初学者）：

HTML：

<div id="container">
    <div id="quiz"></div>
    <div id="choices"></div>
    <input type="button" value="Next">
</div>

JavaScript：

var allQuestions = [{
    question: "Who is the best in the world?",
    choices: ["CM Punk", "John Cena", "Daniel Bryan", "Roman Reigns"],
    correctAnswer: 0
},

{
    question: "Who is the current WWE World Champion?",
    choices: ["John Cena", "Brock Lesnar", "Triple H"],
    correctAnswer: 1
},

{
    question: "Where is Toronto located?",
    choices: ["Ontario", "California", "Georgia", "Texas"],
    correctAnswer: 0
},

{
    question: "What is the largest California city?",
    choices: ["Los Angeles", "San Fransico", "San Deigo", "Anahiem"],
    correctAnswer: 0
}];

var quiz = document.getElementById('quiz');
var choicesContainer = document.getElementById('choices');
var nextButton = document.querySelector('[type=button]');

var correctAnswers = 0;
var questionIndex = 0;


function showQuiz() {
    var currentQuestion = allQuestions[questionIndex].question;
    quiz.textContent = currentQuestion;

    var choicesNum = allQuestions[questionIndex].choices.length;
    var correctAnswer = allQuestions[questionIndex].correctAnswer;

    var choices;

    for (var i = 0; i < choicesNum; i++) {
        choices = allQuestions[questionIndex].choices[i];
        choicesHTML = "<input type='radio' name='choice'>" + choices + "</br>";

        choicesContainer.innerHTML += choicesHTML;
    }

    nextButton.addEventListener('click', function () {
        questionIndex++;
        quiz.textContent = allQuestions[questionIndex].question;
    });


}

showQuiz();

Answer 1

您的问题出在事件监听器方法中。我已经修改了你的代码如下并且它有效。

nextButton.addEventListener('click', function () { var newChoicesHTML=""; var newChoices;

questionIndex++;
choicesNum = allQuestions[questionIndex].choices.length;
quiz.textContent = allQuestions[questionIndex].question;
    for (var i = 0; i < choicesNum; i++) {
 newChoices = allQuestions[questionIndex].choices[i];
 newChoicesHTML+= "<input type='radio' name='choice'>" + newChoices + "</input></br>";

 }

choicesContainer.innerHTML = newChoicesHTML;

 });

基本上问题出在事件变化上，您正在更新问题而不是答案。

Answer 2

按钮的点击处理程序不更新答案，它只更新问题。

我将代码分为两个函数：一个显示测验，一个显示答案。

var quiz = document.getElementById('quiz');
var choicesContainer = document.getElementById('choices');
var nextButton = document.querySelector('[type=button]');

var questionIndex = 0;

function showAnswers() {
    choicesContainer.innerHTML = "";
    var choicesNum = allQuestions[questionIndex].choices.length;
    for (var i = 0; i < choicesNum; i++) {
        var choice = allQuestions[questionIndex].choices[i];
        choicesHTML = "<input type='radio' name='choice'>" + choice + "</br>";
        choicesContainer.innerHTML += choicesHTML;
    }
}

function showQuiz() {
    var currentQuestion = allQuestions[questionIndex].question;
    quiz.textContent = currentQuestion;   
}

showQuiz();
showAnswers();

nextButton.addEventListener('click', function () {
    questionIndex++;
    showQuiz();
    showAnswers();
});

Answer 3

您的 showQuiz 函数正在做 3 件事：

设置问题文本
设置答案列表
向按钮添加事件侦听器

单击该按钮后，您的代码会更新问题文本，但不会更新答案列表。所以我取消添加事件侦听器（它只需要执行一次）然后再次单击按钮调用 showQuiz。我还添加了一行来清空之前的选择。

function showQuiz() {
    var currentQuestion = allQuestions[questionIndex].question;
    quiz.textContent = currentQuestion;

    var choicesNum = allQuestions[questionIndex].choices.length;
    var correctAnswer = allQuestions[questionIndex].correctAnswer;

    var choices;

    choicesContainer.innerHTML = '';

    for (var i = 0; i < choicesNum; i++) {
        choices = allQuestions[questionIndex].choices[i];
        choicesHTML = "<input type='radio' name='choice'>" + choices + "</br>";

        choicesContainer.innerHTML += choicesHTML;
    }
}

nextButton.addEventListener('click', function () {
    questionIndex++;
    showQuiz();
});

无法让我的测验应用程序工作

Can't get my Quiz app to work

html

javascript

css