如何计算两组独立单选按钮的选中值之和 解决拼接值异常问题

问题原因 #

单选按钮的value属性默认是字符串类型，你代码中先执行了字符串拼接再做整数转换，才会输出11、12这类拼接后的错误结果。
比如你选了q1的1分和q2的1分，代码执行顺序是：先把字符串"1"和"1"拼接得到"11"，再用parseInt转成整数11，和你要的数值相加逻辑完全不符。

修复方案 #

你需要先把两个选中值分别转成整数，再执行加法运算，还可以简化嵌套循环的写法，提升可读性：

function displayRadioValue() {
  // 获取q1选中值，未选中默认赋值0
  const q1Checked = document.querySelector('input[name="q1"]:checked');
  const q1Val = q1Checked ? parseInt(q1Checked.value) : 0;
  // 获取q2选中值，未选中默认赋值0
  const q2Checked = document.querySelector('input[name="q2"]:checked');
  const q2Val = q2Checked ? parseInt(q2Checked.value) : 0;
  // 数值相加
  const sum = q1Val + q2Val;
  document.getElementById("result").innerHTML = "Result: " + sum;
}

如果需要兼容不支持querySelector的老旧浏览器，可以沿用你原来的循环逻辑修改：

function displayRadioValue() {
  var ele1 = document.getElementsByName('q1');
  var ele2 = document.getElementsByName('q2');
  var val1 = 0, val2 = 0, sum = 0;

  for (i = 0; i < ele1.length; i++) {
    if (ele1[i].checked) {
      val1 = parseInt(ele1[i].value);
    }
  }
  for (j = 0; j < ele2.length; j++) {
    if (ele2[j].checked) {
      val2 = parseInt(ele2[j].value);
    }
  }
  
  sum = val1 + val2;
  document.getElementById("result").innerHTML = "Result: " + sum;
}

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