如何替代getElementById获取多元素，实现测验答案正误提示？

核心问题分析 #

• document.getElementById()只能获取首个匹配元素，因此点击事件仅作用于第一个选项
• 逐个绑定事件失效通常是因为代码执行时机早于DOM渲染完成（比如JS放在<head>中未等待DOM加载）

实现步骤（无需button/input） #

1. 构建HTML结构

给所有答案选项统一添加类名（如answer-option），用自定义属性data-is-correct标记是否为正确答案，可使用<div>/<p>等标签：

<div class="quiz-container">
  <p class="question-text">以下哪个是JavaScript原始数据类型？</p>
  <div class="answer-option" data-is-correct="false">Array</div>
  <div class="answer-option" data-is-correct="true">String</div>
  <div class="answer-option" data-is-correct="false">Object</div>
</div>

2. 可选：添加CSS优化交互

让选项看起来可点击，提升用户体验：

.answer-option {
  cursor: pointer;
  padding: 10px;
  margin: 6px 0;
  border-radius: 4px;
  border: 1px solid #eee;
}

3. JavaScript实现点击反馈

提供两种可靠方案：

方案一：批量绑定事件（适合静态选项）

确保DOM加载完成后再执行代码，遍历所有选项绑定点击事件：

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有答案选项
  const options = document.querySelectorAll('.answer-option');
  
  options.forEach(option => {
    option.addEventListener('click', function() {
      // 清空之前的反馈文本
      this.textContent = this.textContent.trim();
      // 判断是否正确
      const isCorrect = this.dataset.isCorrect === 'true';
      // 追加反馈
      this.textContent += ` ${isCorrect ? 'correct' : 'wrong'}`;
    });
  });
});

方案二：事件委托（适合动态生成的选项）

利用事件冒泡，给父元素绑定一次事件即可处理所有子选项的点击，性能更优：

document.addEventListener('DOMContentLoaded', function() {
  const quizContainer = document.querySelector('.quiz-container');
  
  quizContainer.addEventListener('click', function(e) {
    // 判断点击目标是否为答案选项
    if (e.target.classList.contains('answer-option')) {
      const target = e.target;
      target.textContent = target.textContent.trim();
      const isCorrect = target.dataset.isCorrect === 'true';
      target.textContent += ` ${isCorrect ? 'correct' : 'wrong'}`;
    }
  });
});

关键注意事项 #

• 避免重复绑定事件：如果使用批量绑定，不要在循环外重复执行绑定逻辑
• 若需要禁止重复点击，可在点击后移除事件监听或添加禁用类

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