大佬教程收集整理的这篇文章主要介绍了DOM 测验会给出错误的答案，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我正在学习 DOM 并想用 HTML 测验（用于练习）创建一个简单的 JavaScript。现在我遇到的问题是，当我点击提交时，所有的答案都是正确的，而不是一个是正确的，而 3 个是错误的。我认为这是我的 HTML 以及我将 ID 分配给不同标签的方式有问题，但我无法弄清楚我做错了什么。
代码
<HTML lang="en" dir="ltr">
<head>
<Meta charset="utf-8">
<Title></Title>
<link rel="stylesheet" href="quiz.CSS">
</head>
<body>
<div class="QuestionOne">
<form ID="quizForm">
<h1> What is your favorite color?</h1>
<input type="radio" ID="red" name="color" value="red">
<label for="red">Red</label><br>
<p></p>
<input type="radio" ID="blue" name="color" value="blue">
<label for="blue">Blue</label><br>
<p></p>
<input type="radio" ID="green" name="color" value="green">
<label for="green">Green</label>
<p></p>
<input type="submit" ID="submit" name="color" value="submit"><br>
</form>
</div>
<script src="quiz.Js">
</script>
</body>
</HTML>
quizForm.addEventListener("submit",function(event) {
event.preventDefault();
var grabAnswer = document.getElementByID('red')
console.log(grabAnswer.ID);
if (grabAnswer.ID == 'red') {
console.log('correct!');
}else{
console.log('wrong');
}
})
谢谢。
问题是你总是在 grapAnswer 中取红色，但你必须使用 var grabAnswer = document.querySelector('input[name="color"]:checked');
演示
var quizForm = document.getElementById("quizForm")
quizForm.addEventListener("submit",function(event) {
event.preventDefault();
var grabAnswer = document.querySelector('input[name="color"]:checked');
console.log(grabAnswer.id);
if (grabAnswer.id == 'red') {
console.log('correct!');
} else {
console.log('wrong');
}
})<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="quiz.css">
</head>
<body>
<div class="QuestionOne">
<form id="quizForm">
<h1> What is your favorite color?</h1>
<input type="radio" id="red" name="color" value="red">
<label for="red">Red</label><br>
<p></p>
<input type="radio" id="blue" name="color" value="blue">
<label for="blue">Blue</label><br>
<p></p>
<input type="radio" id="green" name="color" value="green">
<label for="green">Green</label>
<p></p>
<input type="submit" id="submit" name="color" value="Submit"><br>
</form>
</div>
<script src="quiz.js">
</script>
</body>
</html>,
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>Page Title</title>
</head>
<body>
<h1> What is your favorite color?</h1>
<form id="myForm">
<input type="radio" id="red" name="color" value="red">
<label for="red">Red</label><br>
<p></p>
<input type="radio" id="blue" name="color" value="blue">
<label for="blue">Blue</label><br>
<p></p>
<input type="radio" id="green" name="color" value="green">
<label for="green">Green</label>
<p></p>
<button type="button" id="button">Submit</button><br>
</form>
</body>
</html>
<script>
$(document).ready(function() {
$("#button").click(function() {
if($('input[name=color]:checked','#myForm').val()=='red')
{
alert('Succesfully!');
}
else
{
alert("No");
}
});
});
</script>
你能试试这个代码吗？
,你可以通过两种方式做到这一点
现有答案处理 (1) 所以这是另一个选项的解决方案。
拿你的原始代码，改变
if (grabAnswer.id == 'red') {
到
if (grabAnswer.checked) {
（其中 grabAnswer 是 document.getElementById('red')）
quizForm.addEventListener("submit",function(event) {
event.preventDefault();
// get the correct answer
var grabAnswer = document.getElementById('red')
// see if it's been selected
if (grabAnswer.checked) {
console.log('correct!');
} else {
console.log('wrong');
}
})<div class="QuestionOne">
<form id="quizForm">
<h1> What is your favorite color?</h1>
<input type="radio" id="red" name="color" value="red">
<label for="red">Red</label><br>
<p></p>
<input type="radio" id="blue" name="color" value="blue">
<label for="blue">Blue</label><br>
<p></p>
<input type="radio" id="green" name="color" value="green">
<label for="green">Green</label>
<p></p>
<input type="submit" id="submit" name="color" value="Submit"><br>
</form>
</div>以上是大佬教程为你收集整理的DOM 测验会给出错误的答案全部内容，希望文章能够帮你解决DOM 测验会给出错误的答案所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。