JavaScript中如何将多个range对象的取值相加并存储

你当前的range取值展示方式完全可以适配后续求和需求，无需修改现有展示逻辑，可参考以下两种实现方式：

方法1：批量遍历取值（推荐，适配题量变更场景） #

给所有测验用的range输入框统一加专属类名（比如你现有的form-range没有被其他元素占用可以直接用，也可以单独加quiz-range类避免冲突），然后批量选取求和：

// 求和函数
function getTotalScore() {
  // 选取所有测验range输入
  const allRanges = document.querySelectorAll('.form-range');
  let total = 0;
  allRanges.forEach(range => {
    // 转换为数字类型后累加，避免字符串拼接
    total += Number(range.value);
  });
  return total;
}

// 调用函数将总分存入变量
const totalScore = getTotalScore();

方法2：单独取值累加（适合固定5道题的场景） #

如果题量固定不会变更，可以直接单独取每个range的值相加：

const q1Score = Number(document.getElementById('input1').value);
const q2Score = Number(document.getElementById('input2').value);
const q3Score = Number(document.getElementById('input3').value);
const q4Score = Number(document.getElementById('input4').value);
const q5Score = Number(document.getElementById('input5').value);

const totalScore = q1Score + q2Score + q3Score + q4Score + q5Score;

注意事项 #

• 从range的value属性取到的值默认是字符串类型，必须用Number()转换为数字后再累加，否则会出现字符串拼接的错误结果
• 如果需要实时更新总分，可以在每个range的oninput事件中调用求和函数，同步刷新总分变量

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