Javascript DOM测验将给出错误答案_Javascript_Html_Jquery

Javascript DOM测验将给出错误答案

javascript html jquery

Javascript DOM测验将给出错误答案,javascript,html,jquery,Javascript,Html,Jquery,我正在学习DOM，想创建一个简单的JavaScript和Html测验（用于练习）。现在我遇到的问题是，当我点击submit时，所有答案都是对的，而不是一个正确，三个错误。我认为这是我的html和我将ID分配给不同标签的方式的问题，但我无法找出我做错了什么代码 HTML 谢谢。问题是您总是在图形答案中使用红色，但您必须使用var grabAnswer=document.querySelector（'input[name=“color”]：checked'）演示 var quizForm=do

我正在学习DOM，想创建一个简单的JavaScript和Html测验（用于练习）。现在我遇到的问题是，当我点击submit时，所有答案都是对的，而不是一个正确，三个错误。我认为这是我的html和我将ID分配给不同标签的方式的问题，但我无法找出我做错了什么

代码

HTML

谢谢。

问题是您总是在

图形答案中使用红色，但您必须使用var grabAnswer=document.querySelector（'input[name=“color”]：checked'）
演示

var quizForm=document.getElementById（“quizForm”）
quizForm.addEventListener（“提交”，函数（事件）{
event.preventDefault（）；
var grabAnswer=document.querySelector（'input[name=“color”]：checked'）；
console.log（grabAnswer.id）；
如果（grabAnswer.id==“红色”）{
console.log（'correct！'）；
}否则{
console.log（“错误”）；
}
})

你最喜欢什么颜色？
红色


蓝色


绿色




页面标题
你最喜欢什么颜色？
红色


蓝色


绿色

提交

$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
if（$（'input[name=color]：checked'，'#myForm'）。val（）=='red'）
{
警惕（“成功！”）；
}
其他的
{
警告（“否”）；
}
});
});

你能试试这段代码吗？
你可以用两种方法
获取所选值并查看其是否正确
获取正确答案并查看是否已选中
现有答案处理（1），因此这里是另一个选项的解决方案
使用原始代码，更改
if (grabAnswer.id == 'red') {

到
（其中，grabAnswer
是document.getElementById（'red'）
）

quizForm.addEventListener（“提交”，函数（事件）{
event.preventDefault（）；
//得到正确答案
var grabAnswer=document.getElementById（'red'）
//看看它是否被选中
if（grabAnswer.checked）{
console.log（'correct！'）；
}否则{
console.log（“错误”）；
}
})

你最喜欢什么颜色？
红色


蓝色


绿色



您应该获取选中单选按钮的值，然后将该值与红色进行比较。您可以通过两种方式进行此操作-获取所选值并查看其是否正确，或者获取正确答案并查看其是否被选中。您的原始代码会得到正确的答案，并查看它是否得到了正确的答案-根据定义，它总是正确的-无论选择了什么。您已经完成了“获取A并查看它是否为A”。您尝试过调试该问题吗？这个问题与CSS有什么关系？我从来没有提到这个问题与CSS有关，我一直认为这与我使用ID的方式有关，但我没有正确处理它，我应该得到所选的值。@mamadubah标签在那里，因此相关人员可以帮助回答您的问题。[ask question]页面上的提示说，它们应该读为“我的问题是关于[tag]”——因此，通过添加[css]标记，您已经声明“我的问题[question]是关于css的”。我已经删除了冒犯性的标签。好吧，那么你应该抓住被选中的任何东西的答案，而不仅仅是接受id？@mamadubah是的，这是正确的是，这是一个选项。请为你的答案添加一些解释，以便其他人可以从中学习-你改变了什么，为什么呢？编写代码的朋友使用javascript编写，但在问题中添加了jquery。我为此编写了jquery版本请通过编辑将所有解释添加到您的答案中。另外，请认真解释你的答案，以便其他人可以从中学习。谢谢你的评论。我会小心的

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');
  }


})

<!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>

if (grabAnswer.id == 'red') {

if (grabAnswer.checked) {