JavaScript读取问卷range滑块值并累加计算总得分的方法

你现有代码的核心问题是两处拼写不一致导致逻辑失效，修复后即可正常统计总分：

• 变量名拼写错误：你声明的累加变量是result，后续累加时误用为results
• DOM元素ID不匹配：HTML中展示结果的元素ID为result，JS中查找时误用为results
• 事件绑定逻辑风险：btn-5的点击事件未放在$(document).ready回调中，可能出现页面未加载完成导致绑定失败的问题

修复后完整JS代码 #

$(document).ready(function () {
    $('#q2,#q3,#q4,#q5').hide();
    $('#q1').show();
    $('#emailform').hide();

    $('#btn-1').click(function () {
        $('#q1').hide();
        $('#q2').show();
    });

    $('#btn-2').click(function () {
        $('#q2').hide();
        $('#q3').show();
    });

    $('#btn-3').click(function () {
        $('#q3').hide();
        $('#q4').show();
    });

    $('#btn-4').click(function () {
        $('#q4').hide();
        $('#q5').show();
    });

    // 结果统计逻辑整合到ready回调内
    $('#btn-5').click(function () {
        $('#q5').hide();
        let totalScore = 0;
        // 滑块输入ID列表，也可替换为output组件ID列表实现同样效果
        const inputIds = ['input1', 'input2', 'input3', 'input4', 'input5'];
        inputIds.forEach(id => {
            // 加||0防止异常情况取值为空时产生NaN
            totalScore += parseInt(document.getElementById(id).value) || 0;
        });
        // 对应HTML中id为result的展示元素
        document.getElementById('result').innerText = `你的总得分是：${totalScore}分`;
    });
});

可选方案：从output组件取值统计 #

如果你希望直接读取你已经绑定好的output组件的数值，只需要替换遍历的ID列表即可：

// 替换上面代码中的inputIds为output的ID数组即可
const outputIds = ['q1points','q2points','q3points','q4points','q5points'];
outputIds.forEach(id => {
    totalScore += parseInt(document.getElementById(id).textContent) || 0;
});

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