这是我的 javascript 测验代码:
"use strict"
const questions = [
{
question: "whats the full form of HTML",
answers: {
a: "Hello Text My Language",
b: "Hyper text Main Language",
c: "Hyper Text Markup Language",
d: "Hi There My Luck",
},
correctAnswer:"ent-c",
},
{
question: "whats the full form of CSS",
answers: {
a: "Cascading Style Sheet",
b: "City Site Section",
c: "Cyber Section Stand",
d: "CycleStand Section",
},
correctAnswer:"ent-a",
},
{
question: "whats the full form of JSON",
answers: {
a: "Jest Oriented Note",
b: "JavaScript Object Notation",
c: "Javascript Organised Node",
d: "Joomla Of Node",
},
correctAnswer:"ent-b",
},
{
question: "whats the full form of SQL",
answers: {
a: "Super Query Language",
b: "Sorted Queue Line",
c: "Superior Query Language",
d: "Structured Query Language",
},
correctAnswer:"ent-d",
},
];
let quest = document.querySelector('.question');
let quizLIst = document.querySelector('.quiz');
const btn = document.querySelector('.submitBtn');
const scoreDiv = document.querySelector('.scoreCard');
let currentQuestion = 0;
let score=0;
const loadQuestion = () =>{
quest.innerText="";
quizLIst.innerHTML="";
console.log(questions[currentQuestion].question);
quest.innerText = questions[currentQuestion].question;
const ansEntries = Object.entries(questions[currentQuestion].answers);
for (const [getQ, getA] of ansEntries) {
quizLIst.innerHTML += `
<li><input type="radio" class="ansOptions" id="ent-${getQ}" name="ans" value="${getA}"/><label for="${getA}">${getA}</label></</li>
`;
}
}
loadQuestion();
const allAnss = document.querySelectorAll('.ansOptions');
let getCheckedAnswer = () =>{
let answer="";
allAnss.forEach((currAns) =>{
if(currAns.checked){
answer = currAns.id;
}
});
return answer;
}
btn.addEventListener('click', ()=> {
let checkedAnswer = getCheckedAnswer();
console.log("checked answer is ", checkedAnswer);
if(checkedAnswer === questions[currentQuestion].correctAnswer){
console.log("right");
score++;
}
else{
console.log("wrong");
}
currentQuestion++;
if(currentQuestion <= questions.length){
loadQuestion();
}
})
但不知何故,checkedAnswer 变量没有得到更新。在第一个问题之后,checkedAnswer 值没有变空,因此我的下一个答案被第一个答案困住了。我在哪里可以清空代码中的 checkedAnswer 值,我尝试这样做,但似乎没有任何效果
您需要获取包含在.ansOptions
. 所以你需要getCheckedAnswer()
为每个问题更新,因为allAnss
它仍然包含第一个问题选项中的旧 NodeList。
"use strict"
const questions = [
{
question: "whats the full form of HTML",
answers: {
a: "Hello Text My Language",
b: "Hyper text Main Language",
c: "Hyper Text Markup Language",
d: "Hi There My Luck",
},
correctAnswer:"ent-c",
},
{
question: "whats the full form of CSS",
answers: {
a: "Cascading Style Sheet",
b: "City Site Section",
c: "Cyber Section Stand",
d: "CycleStand Section",
},
correctAnswer:"ent-a",
},
{
question: "whats the full form of JSON",
answers: {
a: "Jest Oriented Note",
b: "JavaScript Object Notation",
c: "Javascript Organised Node",
d: "Joomla Of Node",
},
correctAnswer:"ent-b",
},
{
question: "whats the full form of SQL",
answers: {
a: "Super Query Language",
b: "Sorted Queue Line",
c: "Superior Query Language",
d: "Structured Query Language",
},
correctAnswer:"ent-d",
},
];
let quest = document.querySelector('.question');
let quizLIst = document.querySelector('.quiz');
const btn = document.querySelector('.submitBtn');
const scoreDiv = document.querySelector('.scoreCard');
let currentQuestion = 0;
let score=0;
const loadQuestion = () =>{
quest.innerText="";
quizLIst.innerHTML="";
console.log(questions[currentQuestion].question);
quest.innerText = questions[currentQuestion].question;
const ansEntries = Object.entries(questions[currentQuestion].answers);
for (const [getQ, getA] of ansEntries) {
quizLIst.innerHTML += `
<li><input type="radio" class="ansOptions" id="ent-${getQ}" name="ans" value="${getA}"/><label for="${getA}">${getA}</label></</li>
`;
}
}
loadQuestion();
let getCheckedAnswer = () =>{
const allAnss = document.querySelectorAll('.ansOptions')
let answer="";
allAnss.forEach((currAns) =>{
if(currAns.checked){
answer = currAns.id;
}
});
return answer;
}
btn.addEventListener('click', ()=> {
let checkedAnswer = getCheckedAnswer();
if(checkedAnswer === questions[currentQuestion].correctAnswer){
console.log("right");
++score;
} else {
console.log("wrong");
}
currentQuestion++;
if(currentQuestion < questions.length){
loadQuestion();
}
document.querySelector('.scoreCard').innerText = 'Your score is ' + score + '.';
})
<div class="scoreCard"></div>
<div class="question"></div>
<div class="quiz"></div>
<button class="submitBtn">answer</button>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句