使用querySelectorAll遍历绑定事件出错？CS50实验8问题求助

核心问题 #

你的多题提交无反应，主要是这几个原因导致：

• 循环里的箭头函数绑定了循环变量j的引用，点击按钮时j已经是循环结束后的数值（比如2），导致找不到对应元素报错
• 依赖循环索引j判断题目，耦合性高还容易出错
• 存在语法错误：第二个else if块没闭合，<script>标签也没收尾，直接导致JS代码解析失败

修复后的完整代码 #

<div class="section">
    <h2>Part 2: Free Response</h2>
    <hr>
    <h3>In what state is Harvard Univeristy located?</h3>
    <form>
        <input type="text">
        <button class="freeResponse" type="button" data-target="f1" data-correct="Massachusetts">Submit</button>
        <p id="f1"></p>
    </form>

    <h3>How many planets are there in our solar system?</h3>
    <form>
        <input type="text">
        <button class="freeResponse" type="button" data-target="f2" data-correct="8">Submit</button>
        <p id="f2"></p>
    </form>
</div>

<script>
// 确保DOM加载完成后再执行代码
document.addEventListener('DOMContentLoaded', function() {
    let fResponse = document.querySelectorAll('.freeResponse');
    fResponse.forEach(button => {
        button.addEventListener('click', function() {
            // 从当前按钮所在的表单内获取输入框
            let input = this.closest('form').querySelector('input');
            // 从按钮自定义属性里取目标元素ID和正确答案
            let targetId = this.dataset.target;
            let correctAnswer = this.dataset.correct;
            let responseElement = document.getElementById(targetId);

            if (input.value.trim() === correctAnswer) {
                responseElement.innerHTML = "<h3><i>Correct!</i></h3>";
            } else {
                responseElement.innerHTML = "<h3><i>Incorrect!</i></h3>";
            }
        });
    });
});
</script>

修复要点 #

1. 用自定义属性解耦：给按钮添加data-target（对应结果显示的p标签ID）和data-correct（正确答案），不再依赖循环索引判断题目，后续加新题只需复制表单修改属性即可
2. 正确定位输入框：通过this.closest('form')找到当前按钮所属的表单，再获取里面的输入框，彻底避免索引错误
3. 修复语法漏洞：补全所有缺失的闭合标签和代码块，保证JS能正常解析
4. 保证DOM加载顺序：用DOMContentLoaded事件包裹代码，确保获取DOM元素时它们已经渲染完成
5. 改用forEach遍历：替代原for循环，避免闭包引用问题，代码更简洁易读

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