Question

我正在http://javascriptissexy.com/how-to-learn-javascript-properly/上进行“正确学习JavaScript”跟踪。

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

然而，当我硬编码“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

您的问题在于eventlistener方法。我已经修改了你的代码如下，它可以工作。

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函数正在做三件事：

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

单击该按钮时，您的代码会更新问题文本，但不会更新答案列表。所以我拉出事件监听器（它只需要执行一次），然后再次点击调用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();
});

无法让我的测验应用程序正常运行

3 个答案: