Element inner html nicht Clearing

Question

Ich habe eine einfache Quiz-App in JavaScript erstellt.

Wenn der Benutzer eine Auswahl auswählt, um eine Frage zu beantworten und zu übergeben, sollten die Auswahlmöglichkeiten der vorherigen Frage nicht sichtbar sein.

Leider sind sie und ich bin mir nicht sicher warum. Das Problem trat auf, als ich versuchte, die quizQuestion in der eigenen Funktion in der eigenen askQuestion() -Funktion zu trennen.

Ich habe den Code und eine Geige unten enthalten.

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

dies ist die 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); 

und dies ist der 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 nie gelöscht wird, so dass wir nur halten sie für immer anhängt. Ich fügte dieses vor der Schleife hinzu, die das div behandelt: 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

Sie müssen quizForm vor dem Ausführen der Schleife löschen.

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

Um das Quiz erneut zu starten, müssen Sie die currentQuestion Variable zurückgesetzt. EDIT: und die Tally Variable auch.

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

 
    currentQuestion = 0; 
 
    tally = 0; 
 
}

Und natürlich die Innerhtml klar wie früher geschrieben:

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(); 
 
    } 
 
}