为何val3.value无法赋值？出现NaN解析错误或范围溢出问题

核心错误点 #

• 初始化逻辑错误：你用parseInt()包裹了document.getElementById("num1")和document.getElementById("num2")的返回结果。getElementById返回的是DOM元素对象，不是输入框的数值，对对象执行parseInt会直接得到NaN。后续访问val1.value本质是访问NaN的属性，结果还是NaN。
• 字符串拼接而非数值相加：就算拿到正确的DOM元素，val1.value + val2.value是字符串拼接操作（input的value默认是字符串类型）。比如输入1和2会得到"12"而非3；如果输入框为空，拼接后是空字符串，parseInt后还是NaN，触发“指定值NaN无法解析或超出范围”的提示。

修正后的代码 #

JavaScript部分

// 直接获取DOM元素，不要提前parseInt
var val1 = document.getElementById("num1");
var val2 = document.getElementById("num2");
var val3 = document.getElementById("num3");

document.getElementById("add").addEventListener("click", function() {
  // 转换输入值为数值，用||0处理空值/非数字情况，避免NaN
  var num1 = parseInt(val1.value) || 0;
  var num2 = parseInt(val2.value) || 0;
  // 直接做数值加法后赋值
  val3.value = num1 + num2;
});

HTML部分（无需修改）

<input type="number" id="num1" />
<input type="number" id="num2" />
<input type="number" readonly id="num3" /> <br />
<button id="add">add</button>

额外说明 #

如果需要支持小数运算，可以把parseInt换成parseFloat，或者用Number()转换，确保处理浮点数的场景。

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