制作简易计算器时求和返回NaN？技术问题求助

你的核心问题是没有获取输入框的数值内容，而是直接对DOM元素对象进行了类型转换。

错误原因分析 #

• document.getElementById("op1") 返回的是整个<input>DOM元素对象，不是输入框里的具体数值。
• 直接对元素对象用+运算符尝试转数字时，会因为无法将元素对象转为有效数字而返回NaN。
• 之前出现[object HTMLInputElement][object HTMLInputElement]，是因为直接拼接两个元素对象，默认调用了元素的toString()方法，输出了元素的字符串表示。

修正后的代码 #

只需要在获取元素后加上.value，拿到输入框的实际值再转数字即可：

修正后的JS文件

const sumar = ()=> {
    // 获取输入框的value值并转为数字
    const op1 = +document.getElementById("op1").value;
    const op2 = +document.getElementById("op2").value;
    document.getElementById("resultado").innerHTML = op1 + op2;
}

额外优化（可选） #

如果担心用户清空输入框后出现NaN（虽然<input type="number">限制了输入，但仍可能存在空值情况），可以添加默认值处理，确保计算始终有效：

const sumar = ()=> {
    // 若输入为空，默认取0
    const op1 = +document.getElementById("op1").value || 0;
    const op2 = +document.getElementById("op2").value || 0;
    document.getElementById("resultado").innerHTML = op1 + op2;
}

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