JavaScript问卷积分计算报错：document.querySelector返回null求助

错误原因分析 #

• numQuestions变量未定义：循环逻辑依赖numQuestions但未声明赋值，若循环次数超出实际问题数量，会导致查询不存在的问题元素，返回null。
• 未选中问题导致查询失败：question2的单选框无required属性，用户未选择时执行查询，document.querySelector找不到选中项，返回null。
• 积分取值路径错误：points结构为points["q1"]["q1a1"]，但原代码直接用points[selectedAnswer]取值，无法匹配配置结构，同时会放大前面的查询错误。
• DOM加载时机问题：若JS代码在DOM元素渲染前执行，querySelector无法找到目标元素，返回null。

修复后的完整代码实现 #

HTML部分（补充交互元素与必填校验） #

<fieldset id="question1">
    <p style="font-weight:600;">What's your favorite color?</p>
    <label><input type="radio" name="q1" id="q1a1" required>Red</label><br>
    <label><input type="radio" name="q1" id="q1a2" required>Blue</label><br>
</fieldset>
<fieldset id="question2">
    <p style="font-weight:600;">How old are you?</p>
    <label><input type="radio" name="q2" id="q2a1" required>over 18</label><br>
    <label><input type="radio" name="q2" id="q2a2" required>under 18</label><br>
</fieldset>
<button id="calculateBtn">计算总分</button>
<p>总分：<span id="totalScore">0</span></p>

JavaScript部分（修复所有问题并实现功能） #

// 积分配置
const points = {
    "q1": {"q1a1": 0, "q1a2": 1},
    "q2": {"q2a1": 0, "q2a2": 3}
};

// 确保DOM渲染完成后执行逻辑
document.addEventListener('DOMContentLoaded', function() {
    const calculateBtn = document.getElementById('calculateBtn');
    const totalScoreEl = document.getElementById('totalScore');
    // 自动获取问题数量，避免手动写死
    const numQuestions = Object.keys(points).length;

    calculateBtn.addEventListener('click', function() {
        let totalPoints = 0;
        for (let i = 1; i <= numQuestions; i++) {
            const questionName = `q${i}`;
            // 先判断选中项是否存在，避免null报错
            const selectedInput = document.querySelector(`input[name="${questionName}"]:checked`);
            if (selectedInput) {
                const answerId = selectedInput.id;
                // 按配置结构正确获取积分
                totalPoints += points[questionName][answerId];
            }
        }
        totalScoreEl.textContent = totalPoints;
        
        // 以下是传递总分到结果页面的示例逻辑
        // localStorage.setItem('surveyTotalPoints', totalPoints);
        // window.location.href = 'result.html';
    });
});

关键修复说明 #

1. 自动获取问题数量：通过Object.keys(points).length动态获取问题数，避免手动维护出错。
2. 双重校验选中状态：给所有单选框加required强制用户选择，代码中再通过if (selectedInput)做兜底判断。
3. 修正积分取值路径：按照points[问题名][答案ID]的结构取值，匹配配置数据。
4. DOM加载时机控制：用DOMContentLoaded包裹代码，确保元素渲染完成后再执行查询。
5. 重置总分变量：每次计算前重置totalPoints，避免多次点击导致累加错误。

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