[英]How do I check if my radio button is selected and the loop is working?
因此,我正在尝试制作一个quiz.html文件,该文件将提示用户输入否。 他们想回答的问题。 根据他们的输入,将生成随机问题。 所以我知道这将是一个循环,直到没有循环。 输入到警报框中。 所以我的scoreMe()函数显然没有给出任何答案。 我正在尝试检查特定问题的选中单选按钮是否等于正确答案,但我的分数仅为0%。 那么谁能告诉我我的代码出了什么问题?
<div id="quesRes"></div>
<script>
var quizObj = [
{
"question": "What is the capital of Bangladesh?",
"choice": ["Dhaka", "Chittagong", "Sylhet"],
"correct": ["Dhaka"]
},
{
"question": "What does 2+2 equal to?",
"choice": ["3", "2", "4"], //quizObj[2].choice[0],quizObj[2].choice[1]
"correct": ["4"]
},
{
"question": "What is the real name of Damon Salvatore?",
"choice": ["Paul Wesley", "Steven McQueen", "Ian Somerhalder"], //quizObj[2].choice[0],quizObj[2].choice[1]
"correct": ["Ian Somerhalder"]
},
{
"question": "What is the name of the largest planet in the universe?",
"choice": ["Earth", "Jupiter", "Uranus"], //quizObj[2].choice[0],quizObj[2].choice[1]
"correct": ["Jupiter"]
},
{
"question": "What is the capital of New York?",
"choice": ["Manhattan", "NYC", "Albany"], //quizObj[2].choice[0],quizObj[2].choice[1]
"correct": ["Albany"]
},
{
"question": "How many bones does the human body have?",
"choice": ["109", "206", "114"], //quizObj[2].choice[0],quizObj[2].choice[1]
"correct": ["206"]
},
{
"question": "What is the alter ego of Batman?",
"choice": ["Bruce Banner", "Bruce Wayne", "Tony Stark"], //quizObj[2].choice[0],quizObj[2].choice[1]
"correct": ["Bruce Wayne"]
},
{
"question": "How many books are there in the Harry Potter series?",
"choice": ["7", "5", "8"], //quizObj[2].choice[0],quizObj[2].choice[1]
"correct": ["7"]
},
{
"question": "What is Naruto's surname?",
"choice": ["Sarutobi", "Uchiha", "Uzumaki"], //quizObj[2].choice[0],quizObj[2].choice[1]
"correct": ["Uzumaki"]
},
{
"question": "What is the name of Sherlock Holmes' partner?",
"choice": ["Peterson", "Watson", "Hanson"], //quizObj[2].choice[0],quizObj[2].choice[1]
"correct": ["Watson"]
},
];
var track = [];
var maxQues = prompt("How many questions do you want to answer?", "5");
var rand = Math.floor(Math.random() * maxQues);
var str='<h4>Answer all the questions</h4>';
for(var i=0;i<maxQues;i++){
var rand = Math.floor(Math.random() * maxQues);
str+=(i+1)+'. '+quizObj[rand].question+'<br>';
str+='<form><table>'+
'<tr><td id="a1"><input type="radio" id="rad" name="radio' + i + '"/>'+' '+quizObj[rand].choice[0]+'</td></tr>'+
'<tr><td id="a2"><input type="radio" id="rad" name="radio' + i + '" />'+' '+quizObj[rand].choice[1]+'</td></tr>'+
'<tr><td id="a3"><input type="radio" id="rad" name="radio' + i + '"/>'+' '+quizObj[rand].choice[2]+'</td></tr>'+
'</table></form><br>';
track[i]=rand;
}
str += '<input value="Submit" type="button" onclick="scoreMe()"><br><br>';
str += 'Score: <input id="score" type="text" size="8" ><br><br><br>';
document.getElementById('quesRes').innerHTML = str;
function scoreMe(){
var sum=0;
var check=document.getElementById("rad");
for(var j=0;j<maxQues;j++){
for(var k=0;k<3;k++){
if(check.checked===true){
if(quizObj[track[j]].choice[k]===quizObj[track[j]].correct[0]){
console.log('Works');
sum++;
}
}
}
}
document.getElementById('score').value = ((sum/maxQues)*100)+'%';
}
</script>
好吧,您并没有真正检查用户选择了哪些选项。 您在quizObj[track[j]].choice[k].checked
和quizObj[track[j]].correct[0]
比较没有比较您真正想要的。
quizObj[track[j]].choice[k].checked
返回undefined
,因为您正在尝试checked
属性或该数组中的元素。
为了使测验有效,您需要通过访问多个input
标签而不是您要访问的数组来获取它们的值。 如果从该if
子句中删除.checked
, if
需要的内容记录到控制台。 但是,如果我没有记错的话,那不是您想做的检查。
此外,您还将输出具有相同id
<td>
元素,这是非语义性的,只会使您一路难行。
检查此小提琴以查看它是否有效。 仅选择一个问题,然后查看控制台。
您在这里遇到多个问题。
我要做的第一件事是将值属性放在单选按钮上。
大概是这样的。
str+='<form><table>'+
'<tr><td id="a1"><input type="radio" name="radio' + i + '" value="'+quizObj[rand].choice[0]+'"/>'+' '+quizObj[rand].choice[0]+'</td></tr>'+
'<tr><td id="a2"><input type="radio" name="radio' + i + '" value="'+quizObj[rand].choice[1]+'" />'+' '+quizObj[rand].choice[1]+'</td></tr>'+
'<tr><td id="a3"><input type="radio" name="radio' + i + '" value="'+quizObj[rand].choice[2]+'"/>'+' '+quizObj[rand].choice[2]+'</td></tr>'+
'</table></form><br>';
没有值属性,我不确定您会比较正确的答案。
现在进入scoreMe函数。 您正在检查的是测验对象答案的已检查属性,而不是DOM元素。 您需要选择单选元素并检查这些元素的选中属性。 如下所示:
function scoreMe(){
var sum=0;
for(var j=0;j<maxQues;j++){
var radios = document.getElementsByName('radio' + j),
rl = radios.length;
for(var i = 0; i < rl; i++){
if(radios[i].checked && radios[i].value === quizObj[j].correct[0]){
sum++;
}
}
}
document.getElementById('score').value = ((sum/maxQues)*100)+'%';
}
仍然存在一个逻辑问题,即重复的问题得分不会达到预期。 我要么开始检查以防止重复出现问题,要么给每个问题一个唯一的标识符,该标识符可以通过html属性绑定到收音机。 然后循环播放收音机,并根据此属性找到他们的问题对象,而不是首先循环问题对象的道具。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.