如何将input radio的value值转为数字类型解决算术运算NaN问题

• document.querySelectorAll() 返回的是匹配元素的节点集合，并非单个选中的单选框元素，直接将节点集合传入parseInt()无法解析为有效数字，正确逻辑是先获取到选中的单选框元素，再读取其value属性后转换为数字。
• 你将num1、num2的取值逻辑放在了全局作用域，页面加载完成就会立即执行，此时用户还未选择单选框，自然无法拿到有效值，应当把取值逻辑放到addTambah函数内部，点击按钮时再读取当前选中的数值。
• 额外说明：你原有HTML中所有label的for属性都设置为了radio，无法和对应单选框绑定，点击文字无法选中对应选项，也需要同步修正。

JS 代码 #

function addTambah() {
  // 点击按钮时读取当前选中的单选框值
  let num1 = parseInt(document.querySelector('input[name="number1"]:checked').value);
  let num2 = parseInt(document.querySelector('input[name="number2"]:checked').value);
  const result = num1 + num2;
  alert(result);
}

如果需要处理用户未选择的异常场景，可以加上判断避免报错：

function addTambah() {
  const checkedNum1 = document.querySelector('input[name="number1"]:checked');
  const checkedNum2 = document.querySelector('input[name="number2"]:checked');
  if (!checkedNum1 || !checkedNum2) {
    alert('请先选择两个数字再计算');
    return;
  }
  let num1 = parseInt(checkedNum1.value);
  let num2 = parseInt(checkedNum2.value);
  const result = num1 + num2;
  alert(result);
}

HTML 代码 #

<p>number :</p>
<input type="radio" name="number1" id="number11" value="1">
<label for="number11">1</label>
<input type="radio" name="number1" id="number12" value="2">
<label for="number12">2</label>
<p> number 2 :</p>
<input type="radio" name="number2" id="number21" value="1">
<label for="number21">1</label>
<input type="radio" name="number2" id="number22" value="2">
<label for="number22">2</label>
<br>
<button type="button" onclick="addTambah()">Add</button>

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