Javascript 简单JS函数的解决方案_Javascript_Html_Css

Javascript 简单JS函数的解决方案

javascript html css

Javascript 简单JS函数的解决方案,javascript,html,css,Javascript,Html,Css,希望大家都好。我已经创建了这个简单的JS函数，但我不明白为什么它不起作用。函数名给出正确，JS工作异常。HTML中有所有的P标签，点击后JS只有两行描述颜色。但是只有第一个P标记被着色，而正确的标记被着色。但是3和4是空白的为什么？有没有CSS解决方案？我试过访问：和关注：CSS在p标签中不起作用。这是密码 <!DOCTYPE html> <html> <head> <title>Quiz page</title> </head

希望大家都好。我已经创建了这个简单的JS函数，但我不明白为什么它不起作用。函数名给出正确，JS工作异常。HTML中有所有的P标签，点击后JS只有两行描述颜色。但是只有第一个P标记被着色，而正确的标记被着色。但是3和4是空白的为什么？有没有CSS解决方案？我试过访问：和关注：CSS在p标签中不起作用。这是密码

<!DOCTYPE html>
<html>
<head>
<title>Quiz page</title>
</head>
<body>
<p>Question 1</p>
<p id="wrong" onclick="myFunction()">1. Ans 1 </p>
<p id="correct" onclick="myFunction()">2. Ans 2</p>
<p id="wrong" onclick="myFunction()">3. Ans 3</p>
<p id="wrong" onclick="myFunction()">4. Ans 4</p>

<script>
function myFunction() {
  document.getElementById("wrong").style.color = "red";
  document.getElementById("correct").style.color = "green";
}
</script>

</body>
</html>


测验页
问题1
1。答案1
2。Ans 2
3。答案3
4。Ans 4
函数myFunction（）{
document.getElementById（“错误”）.style.color=“红色”；
document.getElementById（“correct”）.style.color=“绿色”；
}

正如其他人已经评论的那样，您的标记中不应该有重复的

id

。您必须改为使用类：


测验页
问题1
1。答案1
2。Ans 2
3。答案3
4。Ans 4
函数myFunction（）{
document.querySelectorAll（'.error'）.forEach（el=>{
el.style.color='红色'
})
document.querySelectorAll（'.correct'）.forEach（el=>{
el.style.color='绿色'
})
}

id必须是唯一的。您在标记中复制了ID

错误的

。因此1个ID仅代表1个标记？是。你应该改为使用类。它现在起作用了。。谢谢，伙计！我可以多次使用与“document.getElementByClass”（“错误1”）.style.color=“red”相同的类吗```这是有效的。谢谢