İ希望使用带有4个选项的this codepen pen,并且我编辑了js代码,起初几个答案工作正常,但经过几个问题之后,我得到了此错误。问题是我的4个选择。因为它可以通过3个选项正常工作。
错误:
未捕获的TypeError:无法读取未定义的属性'rightAnswer'
在checkAnswer(index.js:1113)
在answerA_clicked(index.js:1082)上
在HTMLButtonElement.onclick(index.html:204)(这是应答按钮)
Codepen JS
//variables
var quiz = [];
quiz[0] = new Question("What is 1/4 of 100?", "25", "24", "23");
quiz[1] = new Question("What color is blood?", "Red", "White", "Green");
quiz[2] = new Question("What color is grass?", "Green", "White", "Red");
quiz[3] = new Question("How many legs does a spider have?", "8", "6", "4");
quiz[4] = new Question("Who is the king of the Netherlands?", "Willem-Alexander", "Willem-Alexzelf", "Willem-Alexniemand");
quiz[5] = new Question("What is 2-2?", "0", "2", "4");
quiz[6] = new Question("What was Vincent van Gogh?", "Artist", "Baker", "Jobless");
var randomQuestion;
var answers = [];
var currentScore = 0;
document.addEventListener("DOMContentLoaded", function(event) {
btnProvideQuestion();
});
function Question(question,rightAnswer,wrongAnswer1,wrongAnswer2) {
this.question = question;
this.rightAnswer = rightAnswer;
this.wrongAnswer1 = wrongAnswer1;
this.wrongAnswer2 = wrongAnswer2;
};
function shuffle(o) {
for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
};
function btnProvideQuestion() {
var randomNumber = Math.floor(Math.random()*quiz.length);
randomQuestion = quiz[randomNumber]; //getQuestion
answers = [randomQuestion.rightAnswer, randomQuestion.wrongAnswer1, randomQuestion.wrongAnswer2];
shuffle(answers);
document.getElementById("question").innerHTML= randomQuestion.question;
document.getElementById("answerA").value= answers[0];
document.getElementById("answerA").innerHTML= answers[0];
document.getElementById("answerB").value= answers[1];
document.getElementById("answerB").innerHTML= answers[1];
document.getElementById("answerC").value= answers[2];
document.getElementById("answerC").innerHTML= answers[2];
}
function answerA_clicked() {
var answerA = document.getElementById("answerA").value;
checkAnswer(answerA);
}
function answerB_clicked() {
var answerB = document.getElementById("answerB").value;
checkAnswer(answerB);
}
function answerC_clicked() {
var answerC = document.getElementById("answerC").value;
checkAnswer(answerC);
}
function adjustScore(isCorrect) {
debugger;
if (isCorrect) {
currentScore++;
} else {
if (currentScore > 0) {
currentScore--;
}
}
document.getElementById("score").innerHTML = currentScore;
}
function checkAnswer(answer) {
if (answer == randomQuestion.rightAnswer) {
adjustScore(true);
btnProvideQuestion();
} else {
alert("Loser!");
adjustScore(false);
}
}
这就是我编辑的js(©想添加错误的分数,所以WScore就是错误的分数)
var quiz = [];
....
....
...[note: So many question in here]
quiz[1187] = new Question("Vincent van Gogh", "1853", "1859", "1844", "1841");
var randomQuestion;
var answers = [];
var currentScore = 0;
var currentWScore = 0;
document.addEventListener("DOMContentLoaded", function(event) {
btnProvideQuestion();
});
function Question(question,rightAnswer,wrongAnswer1,wrongAnswer2,wrongAnswer3) {
this.question = question;
this.rightAnswer = rightAnswer;
this.wrongAnswer1 = wrongAnswer1;
this.wrongAnswer2 = wrongAnswer2;
this.wrongAnswer3 = wrongAnswer3;
};
function shuffle(o) {
for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
};
function btnProvideQuestion() {
var randomNumber = Math.floor(Math.random()*quiz.length);
randomQuestion = quiz[randomNumber]; //getQuestion
answers = [randomQuestion.rightAnswer, randomQuestion.wrongAnswer1, randomQuestion.wrongAnswer2, randomQuestion.wrongAnswer3];
shuffle(answers);
document.getElementById("question").innerHTML= randomQuestion.question;
document.getElementById("answerA").value= answers[0];
document.getElementById("answerA").innerHTML= answers[0];
document.getElementById("answerB").value= answers[1];
document.getElementById("answerB").innerHTML= answers[1];
document.getElementById("answerC").value= answers[2];
document.getElementById("answerC").innerHTML= answers[2];
document.getElementById("answerD").value= answers[3];
document.getElementById("answerD").innerHTML= answers[3];
}
function answerA_clicked() {
var answerA = document.getElementById("answerA").value;
[1082 LİNE] checkAnswer(answerA);
}
function answerB_clicked() {
var answerB = document.getElementById("answerB").value;
checkAnswer(answerB);
}
function answerC_clicked() {
var answerC = document.getElementById("answerC").value;
checkAnswer(answerC);
}
function answerD_clicked() {
var answerD = document.getElementById("answerD").value;
checkAnswer(answerD);
}
function adjustScore(isCorrect) {
debugger;
if (isCorrect) {
currentScore++;
} else {
currentWScore++;
}
document.getElementById("score").innerHTML = currentScore;
document.getElementById("Wscore").innerHTML = currentWScore;
}
[1113 LİNE] function checkAnswer(answer) {
if (answer == randomQuestion.rightAnswer) {
swal({
title: "Right!",
type: "success",
allowOutsideClick: "on",
timer: "850",
showConfirmButton: false,
html: true
});
adjustScore(true);
btnProvideQuestion();
}
else {
if (checkoutHistory.checked) {
swal({
title: "Wrong",
type: "error",
confirmButtonColor: "#3498db",
confirmButtonText: "Next",
customClass: "sweetAlertModal",
allowOutsideClick: "on",
html: true
});
adjustScore(false);
btnProvideQuestion();
} else {
swal({
title: "Wrong!",
type: "error",
confirmButtonColor: "#3498db",
confirmButtonText: "Next",
customClass: "sweetAlertModal",
html: true
});
adjustScore(false);
btnProvideQuestion();
}
}
}