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

这是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变量。编辑：以及计数变量。

＆＃13;

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

＆＃13;

当然要清除之前发布的innerHTML：

＆＃13;

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

＆＃13;

元素内部html不清除

3 个答案: