要素内HTMLがクリアされない

Question

JavaScriptで簡単なクイズアプリを作成しました。

ユーザーが質問に回答する選択肢を選択して提出すると、前の質問の選択肢が表示されないようにする必要があります。

残念ながら、彼らは、私は理由はわかりません。この問題は、quizQuestionを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); 

であり、これはquizFormがクリアされることはありませんので、我々は永遠にそれを付加しておく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

です。 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変数をリセットする必要がもう一度クイズを開始します。 EDIT：とタリー変数も同様です。

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