本文介绍一种基于事件委托与语义化 html 结构的健壮答案校验方案，解决传统 id 绑定方式无法适配多个输入框的问题，支持无限添加题目且无需修改 javascript 逻辑。
本文介绍一种基于事件委托与语义化 html 结构的健壮答案校验方案，解决传统 id 绑定方式无法适配多个输入框的问题，支持无限添加题目且无需修改 javascript 逻辑。
在构建交互式测验页面（如游戏知识填空题）时，初学者常采用 document.querySelector('#Check') + input.id 的硬编码方式处理单题校验。但一旦增加第二道甚至更多题目，就会因重复 ID（如多个 id="Check"）、全局 querySelector('input') 只匹配首个输入框、以及缺乏上下文绑定等问题导致逻辑失效——这正是原问题中“只对第一题生效”的根本原因。
要真正实现可维护、可扩展、语义清晰的多题校验，关键在于三点重构：
✅ 1. 用 <form> 封装每道题，实现天然作用域隔离
每个题目区块应包裹在一个独立 <form> 中，并通过 data-answer 属性声明标准答案。这样，提交事件天然携带题目上下文，无需依赖 ID 或 DOM 位置索引。
<div class="section">
<h3>What is the highest rated game on Steam?</h3>
<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"></output>
</form>
</div>? 注意：<button type="submit"> 触发表单提交事件（而非普通点击），这是启用事件委托的前提；<output> 元素语义上专用于显示计算结果，比 <p id="feedback2"> 更规范且避免 ID 冲突。
✅ 2. 使用事件委托统一监听，消除重复绑定
不再为每个按钮单独添加事件监听器，而是监听 document.body 上的 submit 事件，利用事件冒泡和 event.target 定位触发它的 <form>：
function unifyAnswerValue(value) {
return String(value)
.toLowerCase()
.trim()
.replace(/\s+/g, ' ');
}
function handleSubmitedAnswer(evt) {
evt.preventDefault(); // 阻止页面刷新
const form = evt.target;
const input = form.querySelector('input[type="text"]');
const output = form.querySelector('output[data-valid-answer-feedback]');
const correctAnswer = form.dataset.answer;
const isCorrect = unifyAnswerValue(input.value) === unifyAnswerValue(correctAnswer);
// 更新反馈文本与样式
output.value = isCorrect
? output.dataset.validAnswerFeedback
: output.dataset.invalidAnswerFeedback;
input.classList.toggle('valid', isCorrect);
input.classList.toggle('invalid', !isCorrect);
// 提交后锁定输入框与按钮，防重复提交
input.disabled = true;
form.querySelector('button').disabled = true;
if (isCorrect) input.value = correctAnswer; // 自动填充标准答案
}
// 全局仅需一次监听
document.body.addEventListener('submit', handleSubmitedAnswer);✅ 3. 用 CSS 类控制状态样式，解耦逻辑与表现
配合上述 JS，添加简洁 CSS 规则，让 .valid / .invalid 类直接控制背景色，无需内联 style.backgroundColor：
form input[type="text"].valid { background-color: #d4edda; border-color: #28a745; }
form input[type="text"].invalid { background-color: #f8d7da; border-color: #dc3545; }
form output.feedback { display: block; margin-top: 8px; font-weight: bold; }⚠️ 关键注意事项
- 严禁复用 ID：HTML 中 id 必须唯一，多个 <button id="Check"> 或 <p id="feedback2"> 会破坏 DOM 查询可靠性；改用 class 或 data-* 属性替代。
- 避免 querySelector 模糊匹配：document.querySelector('input') 总返回第一个 <input>，应始终限定作用域（如 form.querySelector('input')）。
- 答案比对需标准化：用户输入常含空格、大小写差异，unifyAnswerValue() 函数统一转小写、去首尾空格、合并连续空格，大幅提升容错性。
- 语义化优先：用 <form> 表达“提交行为”，用 <output> 表达“计算结果”，既利于无障碍访问，也增强代码可读性与可测试性。
✅ 扩展性验证：新增题目只需复制结构
未来添加第三题？只需复制一个 <div class="section"> 区块，修改 data-answer 值和题目内容，JavaScript 和 CSS 完全无需改动——这才是真正面向维护的设计。
这种组件化、数据驱动、事件委托的实现方式，不仅解决了当前多题校验失效问题，更奠定了可长期迭代的测验系统基础。
