元素內部html沒有清除

Question

我在JavaScript中創建了一個簡單的測驗應用程序。

當用戶選擇一個選擇來回答問題並提交它時，上一個問題的選擇應該是不可見的。

不幸的是，他們是，我不知道爲什麼。當我試圖在askQuestion（）函數中將測驗問題分成它自己的div時，問題就發生了。

我在下面包含了代碼和小提琴。

https://jsfiddle.net/scrippyfingers/z84pc45t/

這是JavaScript

var allQuestions = [ 
    { 
     question: "what time is it?", 
     choices: ["10AM", "11AM", "Hammertime"], 
     correctAnswer: 2 
    }, 
    { 
     question: "what is for lunch?", 
     choices: ["Pizza", "Soup", "Tacos"], 
     correctAnswer: 0 
    }, 
    { 
     question: "what?", 
     choices: ["who", "where", "how"], 
     correctAnswer: 1 
    } 
]; 

var submitBtn = document.getElementById("myBtn"); 

var currentQuestion = 0; 
var tally = 0; 

var quizForm = document.getElementById("quiz"); 
var quizQuestion = document.getElementById("quizQuestion"); 

var question; 
var choices; 

var radioButtons = document.getElementsByName('radioOption'); 

var index = 0; 

function beginQuiz(){ 
    if(currentQuestion === 0){ 
     submitBtn.value = "Start Quiz"; 
    } 
} 

function askQuestion(){ 
    choices = allQuestions[currentQuestion].choices; 
    question = allQuestions[currentQuestion].question; 
    if(currentQuestion < allQuestions.length){ 
     submitBtn.value = "Next"; 
     quizQuestion.innerHTML = "<p class='quizQuestion'>" + question + "</p>"; 
     for(var i = 0; i < choices.length; i++){ 
      quizForm.innerHTML += " <label class='answerChoice'><input type= 'radio' name= 'radioOption' value=' " + choices[i] + "'/>" + choices[i] + "</label>" + "<br>"; 
     } 
     if(currentQuestion == allQuestions.length - 1){ 
      submitBtn.value = "Submit"; 
     } else if(currentQuestion > allQuestions.length - 1){ 
      calcQuiz(); 
     } 
    } 
} 

function lookForChecked(){ 
    if(radioButtons.length > 1){ 
     var checked = false; 
     for(var i = 0; i < radioButtons.length; i++){ 
      var selection = radioButtons[i]; 

      if(selection.checked){ 
       var index = [i]; 
       if(i === allQuestions[currentQuestion].correctAnswer){ 
        tally++; 
       } 
       if(currentQuestion < allQuestions.length -1){ 
        currentQuestion++; 
       } else { 
        console.log('you have ended the quiz'); 
        calcQuiz(); 
        return false; 
       } 
       break; 
      } 
     } 
     if($('input[name="radioOption"]:checked').length < 1){ 
      alert('Please Make a Selection'); 
     } 
    } 
    askQuestion(); 
} 

function calcQuiz(){ 
    quizForm.innerHTML = tally + " out of " + allQuestions.length; 
    // submitBtn.remove(); 
    submitBtn.value = "Play again?"; 
} 

window.onload = beginQuiz(); 
submitBtn.addEventListener('click', lookForChecked); 

，這是HTML

<div class="bg1"></div> 
    <div id="quizQuestion"></div> 
    <div id="quiz"></div> 
    <div class="btnContainer"> 
     <input type='submit' id='myBtn' value='' /> 
    </div><!-- end div.btnContainer --> 

Answer 1

quizForm不會被清零，所以我們只是永遠保持其追加。 我在處理該div的循環之前添加了這個： quizForm.innerHTML =「」;

function askQuestion(){ 
    choices = allQuestions[currentQuestion].choices; 
    question = allQuestions[currentQuestion].question; 
    if(currentQuestion < allQuestions.length){ 
     submitBtn.value = "Next"; 
     quizQuestion.innerHTML = "<p class='quizQuestion'>" + question + "</p>"; 
     quizForm.innerHTML = ""; 
     for(var i = 0; i < choices.length; i++){ 
      quizForm.innerHTML += " <label class='answerChoice'><input type= 'radio' name= 'radioOption' value=' " + choices[i] + "'/>" + choices[i] + "</label>" + "<br>"; 
     } 
     if(currentQuestion == allQuestions.length - 1){ 
      submitBtn.value = "Submit"; 
     } else if(currentQuestion > allQuestions.length - 1){ 
      calcQuiz(); 
     } 
    } } 

Answer 2

您需要在運行循環之前清除quizForm。

https://jsfiddle.net/6g1jx6q2/

function askQuestion() { 
    choices = allQuestions[currentQuestion].choices; 
    question = allQuestions[currentQuestion].question; 
    if (currentQuestion < allQuestions.length) { 
    submitBtn.value = "Next"; 
    quizQuestion.innerHTML = "<p class='quizQuestion'>" + question + "</p>"; 
    quizForm.innerHTML = ""; 
    for (var i = 0; i < choices.length; i++) { 
     quizForm.innerHTML += " <label class='answerChoice'><input type= 'radio' name= 'radioOption' value=' " + choices[i] + "'/>" + choices[i] + "</label>" + "<br>"; 
    } 
    if (currentQuestion == allQuestions.length - 1) { 
     submitBtn.value = "Submit"; 
    } else if (currentQuestion > allQuestions.length - 1) { 
     calcQuiz(); 
    } 
    } 
} 

Answer 3

要重新開始測驗，你必須重新設置currentQuestion變量。編輯：以及理貨變量。

function calcQuiz(){ 
 
    quizForm.innerHTML = tally + " out of " + allQuestions.length; 
 
    // submitBtn.remove(); 
 
    submitBtn.value = "Play again?"; 
 

 
    currentQuestion = 0; 
 
    tally = 0; 
 
}

清場的innerHTML的而且正如早前發佈：

if (currentQuestion < allQuestions.length) { 
 
    submitBtn.value = "Next"; 
 
    quizQuestion.innerHTML = "<p class='quizQuestion'>" + question + "</p>"; 
 

 
    quizForm.innerHTML = ""; 
 

 
    for (var i = 0; i < choices.length; i++) { 
 
    quizForm.innerHTML += " <label class='answerChoice'><input type= 'radio' name= 'radioOption' value=' " + choices[i] + "'/>" + choices[i] + "</label>" + "<br>"; 
 
    } 
 
    if (currentQuestion == allQuestions.length - 1) { 
 
    submitBtn.value = "Submit"; 
 
    } else if (currentQuestion > allQuestions.length - 1) { 
 
    calcQuiz(); 
 
    } 
 
}