如何合并不同range控件的数值到一个变量？代码失效问题排查

云上老周

2026-8-14

解决Range控件求和失效的问题

你的代码存在几个关键问题，导致求和功能无法正常运行：

变量作用域错误：a、b、c是在每个range的input回调内部用let声明的局部变量，score函数根本访问不到这些变量。
字符串拼接而非数值求和：range控件的value属性返回的是字符串类型，直接用+运算符会执行字符串拼接，而非数值加法。
未实时触发计算：score函数仅在页面加载时执行了一次，拖动range滑块时不会重新计算结果。
未更新页面显示：即便计算出结果，也没有将值同步到页面的.final_count元素中。

修复方案

直接在score函数中获取当前range的最新值并转为数值类型，同时给所有range绑定input事件触发实时计算，最后将结果渲染到页面：

修复后的JavaScript代码

const rangeOne = document.querySelector('#rangeOne');
const rangeTwo = document.querySelector('#rangeTwo');
const rangeThree = document.querySelector('#rangeThree');
const finalCount = document.querySelector('.final_count');

function score() {
    // 获取当前值并转为整数（如需浮点数可改用Number()或parseFloat()）
    const a = parseInt(rangeOne.value, 10);
    const b = parseInt(rangeTwo.value, 10);
    const c = parseInt(rangeThree.value, 10);
    
    const final = a + b + c;
    console.log(final);
    // 将结果更新到页面
    finalCount.textContent = final;
}

// 页面加载时先计算初始值
score();

// 给每个range绑定input事件，拖动滑块时实时计算
rangeOne.addEventListener('input', score);
rangeTwo.addEventListener('input', score);
rangeThree.addEventListener('input', score);