無法讓我的測驗應用程序正常工作

Question

我正在做http://javascriptissexy.com/how-to-learn-javascript-properly/上的「正確學習JavaScript」跟蹤。

它花了我一直，但我終於想出瞭如何去下一個問題，但選擇不會改變。

但是，當我硬編碼「questionIndex」的問題和選擇正常工作。

反正這裏是我的代碼（我知道這是一個有點亂，我是初學者）：

http://jsfiddle.net/utfwae8d/1/

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

該按鈕的點擊處理程序沒有更新答案，它只是更新問題。

我把代碼分成兩個函數：一個顯示測驗，一個顯示答案。

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 2

你的問題在eventlistener方法中。我已經修改了你的代碼，如下所示。

nextButton.addEventListener（ '點擊'，函數（）{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 3

你showQuiz功能正在做三件事情：

1. 設置問題文本
2. 設置應答列表
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(); 
});