本文介绍一种基于事件委托与语义化 html 结构的 javascript 解决方案，用于统一校验多个独立填空题的答案，避免重复 id 冲突和硬编码逻辑，提升代码可维护性与可复用性。

本文介绍一种基于事件委托与语义化 html 结构的 javascript 解决方案，用于统一校验多个独立填空题的答案，避免重复 id 冲突和硬编码逻辑，提升代码可维护性与可复用性。

在构建交互式在线测验（如游戏知识填空题）时，初学者常会陷入“为每个题目单独写校验逻辑”的误区：例如使用 document.querySelector('input') 获取首个输入框、依赖 id 属性绑定答案、或为每个按钮重复添加事件监听器。这种方式不仅导致代码冗余，更会在新增题目时引发 ID 重复（如多个 ）、选择器误匹配（querySelector 始终只取第一个元素）等问题，最终表现为“仅第一题能正确响应”。

根本解法在于结构升级 + 事件委托：将每道题封装为独立、自包含的语义化组件（推荐使用

），通过 data-* 属性声明答案与反馈文案，并利用事件委托在 document 或 上统一对所有提交行为进行处理。

✅ 推荐结构：以

为单元组织题目

每道题应是一个独立

元素，其 data-answer 属性存储标准答案，内部包含：

• 一个 用于用户输入；
• 一个 触发校验；
• 一个
  元素显示反馈结果，并通过 data-valid-answer-feedback / data-invalid-answer-feedback 指定提示文案。

<div class="section">
  <h3>What is the highest rated game on Steam?</h3>
  <div class="imgContainer">
    <img src="steam-logo.png"    style="max-width:90%" alt="Steam logo">
  </div>
  <form data-answer="Portal 2">
    <input type="text" placeholder="Enter your answer...">
    <button type="submit">Submit</button>
    <output 
      class="feedback"
      data-valid-answer-feedback="✅ Correct!"
      data-invalid-answer-feedback="❌ Incorrect. Try again."></output>
  </form>
</div>

<div class="section">
  <h3>What is the highest rated game on Blizzard?</h3>
  <div class="imgContainer">
    <img src="blizzard-logo.png"    style="max-width:90%" alt="Blizzard logo">
  </div>
  <form data-answer="World of Warcraft">
    <input type="text" placeholder="Enter your answer...">
    <button type="submit">Submit</button>
    <output 
      class="feedback"
      data-valid-answer-feedback="✅ Correct!"
      data-invalid-answer-feedback="❌ Incorrect. Try again."></output>
  </form>
</div>

✅ 核心脚本：单次监听，智能分发

以下 JavaScript 采用事件委托，监听整个页面的 submit 事件，自动识别触发来源所属的

，并精准提取其 data-answer 和子元素进行比对：

// 工具函数：标准化字符串（忽略大小写、首尾空格、多余空白）
function normalize(str) {
  return String(str).toLowerCase().trim().replace(/\s+/g, ' ');
}

// 提交处理器
function handleQuizSubmit(event) {
  event.preventDefault(); // 阻止表单默认提交（避免页面刷新）

  const form = event.target;
  const input = form.querySelector('input[type="text"]');
  const output = form.querySelector('output[data-valid-answer-feedback]');

  if (!input || !output) return;

  const expected = form.dataset.answer;
  const userAnswer = input.value;
  const isCorrect = normalize(userAnswer) === normalize(expected);

  // 更新反馈文案
  output.value = isCorrect 
    ? output.dataset.validAnswerFeedback 
    : output.dataset.invalidAnswerFeedback;

  // 切换样式类（需配合 CSS）
  input.classList.toggle('valid', isCorrect);
  input.classList.toggle('invalid', !isCorrect);

  // 可选：锁定已作答题目，防止重复提交
  if (isCorrect) input.value = expected; // 回填标准答案
  input.disabled = true;
  form.querySelector('button[type="submit"]').disabled = true;
}

// 全局监听 —— 一次注册，永久生效
document.body.addEventListener('submit', handleQuizSubmit);

✅ 必备 CSS：可视化反馈

为提升用户体验，建议添加如下样式规则，使正确/错误状态一目了然：

/* 在 styles.css 中追加 */
form input[type="text"].valid {
  background-color: #d4edda !important;
  border-color: #28a745;
}
form input[type="text"].invalid {
  background-color: #f8d7da !important;
  border-color: #dc3545;
}
form output.feedback {
  display: block;
  margin-top: 8px;
  font-weight: bold;
}

⚠️ 注意事项与最佳实践

• 禁止重复 ID：HTML 中 id 必须唯一。原代码中多个 和

  是严重错误，应改用 class 或语义化标签（如

  ）替代。

• 不依赖 id 编程：脚本应通过 DOM 关系（如 form.querySelector()）定位元素，而非 getElementById()，确保组件可无限复用。
• 增强容错性：normalize() 函数处理常见输入差异（如 "portal2" vs "Portal 2"），提升答题友好度。
• 无障碍友好： 包裹提供语义结构，配合 （建议后续补充）可进一步提升屏幕阅读器支持。
• 可扩展性强：新增题目只需复制
  块并修改 data-answer，无需改动任何 JS 或 CSS。

通过以上重构，你的测验系统将具备工业级的可维护性——无论增加 10 道还是 100 道填空题，校验逻辑始终稳定、简洁、无冲突。