我正在构建一个非常简单的测验并且我已经打了一堵小墙。所以我的结构是我已经提出5个问题（使用单选按钮）给出正确的单选按钮ID，然后在JavaScript中我将这些单选按钮作为目标。但是我将答案存储在一个数组中。我已经在第一个问题上对它进行了测试，看看数组索引是否可以在我的if语句中运行，但事实并非如此。例如：if(radio1.checked === answers[0])然后它应警告说它是正确的。但相反，它是我的else声明，不知道如何通过这样做，任何建议吗？
SIDE注意：我是JavaScript的新手，所以我想学习如何正确使用数组
var score = 0;
var radio1 = document.getElementById('correctradio1');
var submit = document.getElementById('submit');
submit.addEventListener('click', function quiz(){
var answers = ['Yellow', 'Donald trump', 'Michael Jackson', 'red', 'Oscar'];
if(radio1.checked === answers[0]) {
document.getElementById('results').innerHTML = "yes thats correct";
}else{
alert('nope');
}
});<h2>
Knowlegde Quiz
</h2>
<br>
<p>What is the color of the sun?</p>
<input type="radio" name="selection" id="correctradio1"> Yellow<br>
<input type="radio" name="selection" > Green<br>
<input type="radio" name="selection" > Blue
<p>Who is the President?</p>
<input type="radio" name="selection" id="correctradio2"> Donald trump<br>
<input type="radio" name="selection"> Beyonce<br>
<input type="radio" name="selection"> Blue Ivy
<p>Who was the lead singer in The Jackson 5?</p>
<input type="radio" name="selection"> Marvin gaye<br>
<input type="radio" name="selection"> Toni braxton<br>
<input type="radio" name="selection" id="correctradio3"> Michael Jackson
<p>What color is Elmo?</p>
<input type="radio" name="selection"> Green<br>
<input type="radio" name="selection"> pink<br>
<input type="radio" name="selection" id="correctradio4"> red
<p>Who created the Muppets?</p>
<input type="radio" name="selection"> Elmo<br>
<input type="radio" name="selection" id="correctradio5"> Jim Henson<br>
<input type="radio" name="selection"> Oscar<br><br>
<input type="submit" value="Submit Quiz" id="submit">
<h3>You got <span id="results"></span> correct
</h3>
答案 0 :(得分：2)
Radio buttons 需要为它们设置value，以便在您选择时具有意义。那个value是你想要与你的数组值进行比较的东西。您的代码尝试将checked属性的true / false值与数组中的答案进行比较，这将始终导致错误的答案，因为true（checked属性的值在选中的单选按钮上）不是正确答案之一。
接下来，如果你总是比较＆＃34;正确答案的价值＆＃34;根据正确答案的单选按钮，你永远不会得到错误的答案。按下提交按钮时，您需要查找已选中的按钮（来自每个组），并将每个值与数组中相应的正确答案进行比较。
此外，每组单选按钮必须具有与其他组不同的name，以便每个组可以选择一个选项。现在，在您的代码中，您只能从所有选项中选择一个单选按钮。
var score = 0;
var submit = document.getElementById('submit');
var result = document.getElementById('results')
var answers = ['Yellow', 'Donald Trump', 'Michael Jackson', 'red', 'Oscar'];
submit.addEventListener('click', function quiz(){
// You need to get the checked radio button at the time that the submit button is pressed.
var checkedRadioButton1 = document.querySelector("input[name='selection1']:checked");
// Compare the *value* of the radio button against the value in the array.
if(checkedRadioButton1.value == answers[0]) {
result.textContent = "yes thats correct";
}else{
alert('nope');
}
});<h2>
Knowlegde Quiz
</h2>
<p>What is the color of the sun?</p>
<input type="radio" name="selection1" id="correctradio1" value="Yellow"> Yellow<br>
<input type="radio" name="selection1" value="Green"> Green<br>
<input type="radio" name="selection1" value="Blue"> Blue
<p>Who is the President?</p>
<input type="radio" name="selection2" id="correctradio2" value="Donald trump"> Donald Trump<br>
<input type="radio" name="selection2" value="Beyonce"> Beyonce<br>
<input type="radio" name="selection2" value="Blue Ivy"> Blue Ivy
<p>Who was the lead singer in The Jackson 5?</p>
<input type="radio" name="selection3" value="Marvin Gaye"> Marvin gaye<br>
<input type="radio" name="selection3" value="Toni Braxton"> Toni braxton<br>
<input type="radio" name="selection3" value="Michael Jackson" id="correctradio3"> Michael Jackson
<p>What color is Elmo?</p>
<input type="radio" name="selection4" value="green"> Green<br>
<input type="radio" name="selection4" value="pink"> pink<br>
<input type="radio" name="selection4" value="red" id="correctradio4"> red
<p>Who created the Muppets?</p>
<input type="radio" name="selection5" value="Elmo"> Elmo<br>
<input type="radio" name="selection5" value="Jim Henson" id="correctradio5"> Jim Henson<br>
<input type="radio" name="selection5" value="Oscar"> Oscar<br><br>
<input type="submit" value="Submit Quiz" id="submit">
<h3>You got <span id="results"></span> correct
</h3>
虽然对于刚接触JavaScript的人来说这是一个很好的第一种方法，但在编码方面确实非常浪费。更简化的方法如下（阅读评论以供解释）：
var score = 0;
var submit = document.getElementById('submit');
var result = document.getElementById('results')
var incorrect = [];
// When comparing strings, remember that case matters. Store all the strings
// as lower case and then later, we'll compare lower case against lower case.
var answers = ['yellow', 'donald trump', 'michael jackson', 'red', 'jim henson'];
submit.addEventListener('click', function(){
// Reset game
incorrect = [];
score = 0;
// Get the checked radio button from each group and place into an array
var checkedByGroup = Array.prototype.slice.call(document.querySelectorAll("input[type='radio']:checked"));
// Count how many checks were made and if the user didn't answer all
// the questions, exit with a message:
if(checkedByGroup.length < answers.length){
alert("You didn't answer all the questions! Try again!");
return;
}
// Now you have two arrays: one with all the correct answers and
// one with radio buttons. Both arrays have the same amount of items
// and each index in each array corresponds to each other.
// Loop through the correct answers:
answers.forEach(function(value, index){
// Compare the answer against the corresponding radio button array
// Remember to compare lower case against lower case!
if(checkedByGroup[index].value.toLowerCase() === value){
score++; // Add a point
} else {
incorrect.push(index + 1); // Add question number to incorrect array
}
});
// If you didn't get a perfect score:
if(score !== 5){
// Tell the player which questions they got wrong
alert("You got question(s) " + incorrect.join() + " wrong!");
}
// Either way, report the score
result.textContent = "You got " + score + " right!";
});<h2>Knowlegde Quiz</h2>
<p>What is the color of the sun?</p>
<input type="radio" name="q1" value="Yellow"> Yellow<br>
<input type="radio" name="q1" value="Green"> Green<br>
<input type="radio" name="q1" value="Blue"> Blue
<p>Who is the President?</p>
<input type="radio" name="q2" value="Donald trump"> Donald Trump<br>
<input type="radio" name="q2" value="Beyonce"> Beyonce<br>
<input type="radio" name="q2" value="Blue Ivy"> Blue Ivy
<p>Who was the lead singer in The Jackson 5?</p>
<input type="radio" name="q3" value="Marvin Gaye"> Marvin gaye<br>
<input type="radio" name="q3" value="Toni Braxton"> Toni braxton<br>
<input type="radio" name="q3" value="Michael Jackson"> Michael Jackson
<p>What color is Elmo?</p>
<input type="radio" name="q4" value="green"> Green<br>
<input type="radio" name="q4" value="pink"> pink<br>
<input type="radio" name="q4" value="red"> red
<p>Who created the Muppets?</p>
<input type="radio" name="q5" value="Elmo"> Elmo<br>
<input type="radio" name="q5" value="Jim Henson"> Jim Henson<br>
<input type="radio" name="q5" value="Oscar"> Oscar<br><br>
<input type="submit" value="Submit Quiz" id="submit">
<h3 id="results"></h3>
答案 1 :(得分：1)
单选按钮需要有值，而不是使用getElementById使用querySelector。如下。
<h2>
Knowlegde Quiz
</h2>
<br>
<p>What is the color of the sun?</p>
<input type="radio" name="selection" id="correctradio1" value="Yellow"> Yellow<br>
<input type="radio" name="selection" value="Green"> Green<br>
<input type="radio" name="selection" value="Blue"> Blue<br>
<input type="submit" value="Submit Quiz" id="submit">
<h3>You got <span id="results"></span> correct
</h3>compile group: 'org.apache.kafka', name: 'kafka-clients', version: '0.10.2.0'
compile group: 'org.apache.kafka', name: 'kafka-streams', version: '0.10.2.0'
答案 2 :(得分：0)
你真的很亲密。您实际上不需要答案数组，因为您已经使用“correctradioX”类标记了答案。
你可以通过将每一个添加到if中来完成此操作。
var score = 0;
var radio1 = document.getElementById('correctradio1');
var radio2 = document.getElementById('correctradio2');
var radio3 = document.getElementById('correctradio3');
var radio4 = document.getElementById('correctradio4');
var radio5 = document.getElementById('correctradio5');
var submit = document.getElementById('submit');
submit.addEventListener('click', function quiz(){
var answers = ['Yellow', 'Donald trump', 'Michael Jackson', 'red', 'Oscar'];
if (radio1.checked &&
radio2.checked &&
radio3.checked &&
radio4.checked &&
radio5.checked) {
document.getElementById('results').innerHTML = "yes thats correct";
} else {
alert('nope');
}
});<h2>
Knowlegde Quiz
</h2>
<br>
<p>What is the color of the sun?</p>
<input type="radio" name="q1" id="correctradio1"> Yellow<br>
<input type="radio" name="q1" > Green<br>
<input type="radio" name="q1" > Blue
<p>Who is the President?</p>
<input type="radio" name="q2" id="correctradio2"> Donald trump<br>
<input type="radio" name="q2"> Beyonce<br>
<input type="radio" name="q2"> Blue Ivy
<p>Who was the lead singer in The Jackson 5?</p>
<input type="radio" name="q3"> Marvin gaye<br>
<input type="radio" name="q3"> Toni braxton<br>
<input type="radio" name="q3" id="correctradio3"> Michael Jackson
<p>What color is Elmo?</p>
<input type="radio" name="q4"> Green<br>
<input type="radio" name="q4"> pink<br>
<input type="radio" name="q4" id="correctradio4"> red
<p>Who created the Muppets?</p>
<input type="radio" name="q5"> Elmo<br>
<input type="radio" name="q5" id="correctradio5"> Jim Henson<br>
<input type="radio" name="q5"> Oscar<br><br>
<input type="submit" value="Submit Quiz" id="submit">
<h3>You got <span id="results"></span> correct</h3>