[英]Element inner html not clearing
我已经用JavaScript创建了一个简单的测验应用程序。
当用户选择一个选项回答一个问题并提交时,上一个问题的选择应该不可见。
不幸的是,他们是,我不确定为什么。 当我尝试在askQuestion()函数中将quizQuestion分离到它自己的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 -->
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();
}
} }
您需要在运行循环之前清除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();
}
}
}
要再次开始测验,您必须重置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(); } }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.