scrippyfingers scrippyfingers - 2 months ago 8
HTML Question

Element inner html not clearing

I have created a simple quiz app in JavaScript.

When the user chooses a selection to answer a question and submits it, the choices from the previous question should not be visible.

Unfortunately, they are and I am not sure why. The problem happened when I tried to separate the quizQuestion into it's own div in the askQuestion() function.

I have included the code and a fiddle below.

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

this is the 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);


and this is the 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

quizForm is never cleared, so we just keep appending it forever. I added this before the loop that handles that 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();
        }
    } }