我正在尝试编写简单的 JS 代码来实现多项选择题。我已经能够将按钮颜色更改为红色或绿色，具体取决于是否选择了正确的答案，但是我想确保当单击单独的答案时，其余按钮将恢复为原始颜色。我正在尝试用 for 循环来做到这一点。根据开发工具，代码中似乎没有错误，但当单击正确答案后，红色按钮只会保持红色。我哪里出错了？
<!-- revert button colors (#d9edff) using the variables unclicked and doc query selector-->
document.addEventListener('DOMContentLoaded', function(){
let correct = document.querySelector(".correct_answer");
correct.addEventListener('click', function() {
correct.style.backgroundColor = 'green';
let correct_feedback = document.querySelector(".feedback");
correct_feedback.innerText = 'Correct!';
let unclicked = document.querySelectorAll(".incorrect_answer");
for (let i = 0; i < unclicked.length; i++){
unclicked.style.backgroundColor = '#d9edff';
}
});
let incorrects = document.querySelectorAll(".incorrect_answer");
incorrects.forEach(item => item.addEventListener('click', function(event) {
let clicked = event.srcElement;
clicked.style.backgroundColor = 'red';
let incorrect_feedback = document.querySelector(".feedback");
incorrect_feedback.innerText = 'Incorrect';
}));
});<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Trivia!</title>
</head>
<body>
<div class="header">
<h1>Trivia!</h1>
</div>
<div class="container">
<div class="section">
<h2>Part 1: Multiple Choice </h2>
<hr>
<h3>How many species of Dolphin are there?</h3>
<button class="correct_answer">42</button>
<button class="incorrect_answer">53</button>
<button class="incorrect_answer">24</button>
<button class="incorrect_answer">11</button>
<p class="feedback"></p>
</div>最佳答案
永远不要对做某事失去希望。对于这个问题，您的代码有点复杂。我选择了 onclick 和 onblur 事件，没有任何循环。但是你的复杂代码肯定会让你成为一个更强大的逻辑构建者。如果你使用 onmouseup onmousedown 事件做同样的事情，你会变得更强大。它会给你比你想象的更多的信心。我们随时为您提供帮助。永远不要失去希望!!
let change1=(event)=>{
event.target.style.backgroundColor="green"
}
let change2=(event)=>{
event.target.style.backgroundColor="red"
}
let blur2=(event)=>{
event.target.style.backgroundColor="white"
}<div class="header">
<h1>Trivia!</h1>
</div>
<div class="container">
<div class="section">
<h2>Part 1: Multiple Choice </h2>
<hr>
<h3>How many species of Dolphin are there?</h3>
<button id="correct_answer" onclick="change1(event)" onblur="blur2(event)">42</button>
<button class="incorrect_answer" onclick="change2(event)" onblur="blur2(event)">53</button>
<button class="incorrect_answer" onclick="change2(event)" onblur="blur2(event)">24</button>
<button class="incorrect_answer" onclick="change2(event)" onblur="blur2(event)">11</button>
<p class="feedback"></p>
</div>
</div>关于javascript - 如何恢复按钮颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/74035470/