我正在制作HTML/JS脚本。目的是让按钮改变颜色，并显示文本时，根据正确/不正确的答案点击。代码工作(我是这种语言的新手)，但我的主要问题是，我需要单击按钮两次更改显示。我已经检查了类似的问题，并找到了不同的解决方案。删除样式，或使用type='submit'而不是type='button')，但都不起作用。
<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>Test!</title>
<script>
function Q1_a()
{
document.getElementById("answerQ1_1").addEventListener("click", function(Q1_a)
{
document.getElementById("res_q1_1").innerHTML = "incorrect";
document.getElementById("answerQ1_1").style.backgroundColor = "red";
document.getElementById("answerQ1_2").style.backgroundColor = " #f5f5f5";
document.getElementById("answerQ1_3").style.backgroundColor = " #f5f5f5";
});
document.getElementById("answerQ1_2").addEventListener("click", function(Q1_a)
{
document.getElementById("res_q1_1").innerHTML = "correct";
document.getElementById("answerQ1_2").style.backgroundColor = "green";
document.getElementById("answerQ1_1").style.backgroundColor = " #f5f5f5";
document.getElementById("answerQ1_3").style.backgroundColor = " #f5f5f5";
});
document.getElementById("answerQ1_3").addEventListener("click", function(Q1_a)
{
document.getElementById("res_q1_1").innerHTML = "incorrect";
document.getElementById("answerQ1_3").style.backgroundColor = "red";
document.getElementById("answerQ1_1").style.backgroundColor = " #f5f5f5";
document.getElementById("answerQ1_2").style.backgroundColor = " #f5f5f5";
});
}
</script>
</head>
<body>
<h1>Event </h1>
<h2>Multiple choice </h2>
<hr>
<h3> How many chairs do we need? </h3>
<h3 id="res_q1_1" style="text-align: center;"></h3>
<p>
<form>
<button type="button" id="answerQ1_1" onclick="Q1_a()">6 chairs</button>
<button type="button" id="answerQ1_2" onclick="Q1_a()">2 chairs</button>
<button type="button" id="answerQ1_3" onclick="Q1_a()">1 chair</button>
</form>
</p>
</body>
</html>
问题是您正在使用onclick html属性来运行代码，该代码本身将事件侦听器添加到按钮中。当你第一次点击按钮时，所有按钮都添加了新的事件监听器，当你第二次点击时，这些监听器启动。删除函数Q1_a，但保留其内容。此外，将整个脚本块移动到页面的底部，就在关闭</body>标记之前(或延迟它，或在加载时运行内容)。但只要把它移到底部就可以了)。这样，它将在元素到达页面后运行。
document.getElementById("answerQ1_1").addEventListener("click", function(Q1_a)
{
document.getElementById("res_q1_1").innerHTML = "incorrect";
document.getElementById("answerQ1_1").style.backgroundColor = "red";
document.getElementById("answerQ1_2").style.backgroundColor = " #f5f5f5";
document.getElementById("answerQ1_3").style.backgroundColor = " #f5f5f5";
});
document.getElementById("answerQ1_2").addEventListener("click", function(Q1_a)
{
document.getElementById("res_q1_1").innerHTML = "correct";
document.getElementById("answerQ1_2").style.backgroundColor = "green";
document.getElementById("answerQ1_1").style.backgroundColor = " #f5f5f5";
document.getElementById("answerQ1_3").style.backgroundColor = " #f5f5f5";
});
document.getElementById("answerQ1_3").addEventListener("click", function(Q1_a)
{
document.getElementById("res_q1_1").innerHTML = "incorrect";
document.getElementById("answerQ1_3").style.backgroundColor = "red";
document.getElementById("answerQ1_1").style.backgroundColor = " #f5f5f5";
document.getElementById("answerQ1_2").style.backgroundColor = " #f5f5f5";
});<html lang="en">
<head>
<title>Test!</title>
</head>
<body>
<h1>Event </h1>
<h2>Multiple choice </h2>
<hr>
<h3> How many chairs do we need? </h3>
<h3 id="res_q1_1" style="text-align: center;"></h3>
<form>
<button type="button" id="answerQ1_1">6 chairs</button>
<button type="button" id="answerQ1_2">2 chairs</button>
<button type="button" id="answerQ1_3">1 chair</button>
</form>
</body>
</html>