如何在HTML/CSS/JavaScript多选题测验中正确判断按钮点击有效性

问题根源 #

1. document.querySelector('.correct')仅能选中页面中第一个带.correct类的按钮，后续题目里的正确按钮没有绑定点击事件
2. 所有按钮点击后都修改document.querySelector('.feedback1')对应的元素，只会把反馈显示在第一题下方，和当前操作的题目不匹配
3. 错误按钮用querySelectorAll循环绑定，但逻辑未关联对应题目的反馈，且直接用循环索引不如直接操作触发事件的元素直观

修复方案 #

按题目容器遍历，给每个题目内的按钮单独绑定事件，同时找到当前题目对应的反馈框，确保操作的都是当前题目的元素：

1. 遍历所有题目容器（.container）
2. 在每个容器内，分别获取正确按钮、错误按钮组、对应的反馈元素
3. 绑定点击事件时，用event.target获取当前点击的按钮，修改它的样式，同时更新当前题目内的反馈内容

修改后的完整代码 #

HTML

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

<!-- Body -->
<div class="header">
  <h1>Flag Quiz</h1>
</div>

<div class="container">
  <h2 style="padding-top: 20px;">Multiple Choice Quiz</h2>
  <hr>
  <div class="section">
    <h3>What country is this?</h3>
    <p style="font-size: 20px;">1.</p>
  </div>
  <div class="imgContainer">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Flag_of_Lithuania.svg/640px-Flag_of_Lithuania.svg.png" width="40%">
  </div>
  <div class="imgButton">
    <button class="incorrect">Myanmar</button>
    <button class="incorrect">Latvia</button>
    <button class="correct">Lithuania</button>
    <button class="incorrect">Italy</button>
    <p class="feedback"></p>
  </div>
</div>
<div class="container">
  <div class="section">
    <h3>What country is this?</h3>
    <p style="font-size: 20px;">2.</p>
  </div>
  <div class="imgContainer">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Bandera_de_Espa%C3%B1a.svg/1200px-Bandera_de_Espa%C3%B1a.svg.png" width="40%">
  </div>
  <div class="imgButton">
    <button class="correct">Spain</button>
    <button class="incorrect">Portugal</button>
    <button class="incorrect">Mexico</button>
    <button class="incorrect">China</button>
    <p class="feedback"></p>
  </div>
</div>

CSS

.header {
  padding: 50px;
  text-align: center;
  background: #20b2aa;
  color: white;
  font-size: 30px;
}

h1 {
  padding-top: 20px;
  font-size: 50px;
  font-family: 'Marker Felt', fantasy;
  text-align: center;
}

.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 30px; /* 题目间增加间距 */
}

.section {
  padding: 0.5rem 2rem 1rem 2rem;
}

.section:hover {
  background-color: #f5f5f5;
  transition: color 2s ease-in-out, background-color 0.15s ease-in-out;
}

.imgContainer {
  text-align: center;
}

.imgButton {
  padding: 20px;
  text-align: center;
}

button {
  margin: 0 10px; /* 按钮间增加间距 */
  padding: 8px 16px;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  // 遍历所有题目容器
  const quizContainers = document.querySelectorAll('.container');
  
  quizContainers.forEach(container => {
    // 获取当前题目内的元素
    const correctBtn = container.querySelector('.correct');
    const incorrectBtns = container.querySelectorAll('.incorrect');
    const feedback = container.querySelector('.feedback');

    // 绑定正确按钮事件
    correctBtn.addEventListener('click', function(event) {
      event.target.style.backgroundColor = 'green';
      feedback.innerHTML = 'Correct!';
      // 可选：禁用当前题目所有按钮，防止重复点击
      disableButtons(container.querySelectorAll('button'));
    });

    // 绑定错误按钮事件
    incorrectBtns.forEach(btn => {
      btn.addEventListener('click', function(event) {
        event.target.style.backgroundColor = 'red';
        feedback.innerHTML = 'Incorrect';
        // 可选：禁用当前题目所有按钮，防止重复点击
        disableButtons(container.querySelectorAll('button'));
      });
    });
  });

  // 辅助函数：批量禁用按钮
  function disableButtons(buttons) {
    buttons.forEach(btn => btn.disabled = true);
  }
});

额外优化点 #

• 给题目容器增加了底部间距，提升页面美观度
• 给按钮增加左右间距，避免拥挤
• 新增按钮禁用逻辑，防止用户重复点击同一题目选项
• 统一反馈框类名为.feedback，避免用序号区分，更便于后续添加新题目

内容的提问来源于stack exchange，提问作者Benxsu