本文详解如何通过 JavaScript 正确读取 <input type="number"> 的值、避免返回 [object HTMLInputElement] 错误，并使用 parseFloat() 将字符串转为数字完成加法计算。
本文详解如何通过 javascript 正确读取 `` 的值、避免返回 `[object htmlinputelement]` 错误，并使用 `parsefloat()` 将字符串转为数字完成加法计算。
在初学网页编程时，一个常见误区是：在页面加载时就获取输入框的值，而非在用户点击按钮时动态读取。原始代码中，let x = document.getElementById('x').nodeValue 这一行存在两个关键问题：
- nodeValue 不适用于 <input> 元素——应使用 .value 属性；
- 更重要的是，这段赋值语句在 <script> 标签加载时立即执行，此时输入框还是空的，x 和 y 实际被赋值为 undefined 或空字符串；后续 onclick="sum(x, y)" 传入的其实是 DOM 元素对象本身（而非其值），导致 x + y 执行的是对象拼接，结果为 "[object HTMLInputElement][object HTMLInputElement]"。
✅ 正确做法是：在函数调用时实时获取 .value，并显式转换为数字类型。以下是优化后的完整可运行代码：
<!DOCTYPE html>
<html>
<head>
<title>Input Sum Calculator</title>
</head>
<body>
<form>
<input type="number" id="x" placeholder="Enter first number" />
<input type="number" id="y" placeholder="Enter second number" />
<input
type="button"
value="Calculate Sum"
onclick="sum()"
/>
</form>
<script>
function sum() {
const xInput = document.getElementById('x');
const yInput = document.getElementById('y');
// 使用 parseFloat() 安全转换：支持整数、小数，空值/非法输入返回 NaN
const x = parseFloat(xInput.value) || 0;
const y = parseFloat(yInput.value) || 0;
const result = x + y;
alert(`Sum: ${result}`);
}
</script>
</body>
</html>? 关键改进说明：
- 移除提前赋值：不再在 <script> 中预先读取 .value，所有值均在 sum() 函数内实时获取；
- 使用 type="button" 替代 type="submit"：避免表单默认提交刷新页面（若需提交，应配合 event.preventDefault()）；
- parseFloat() + || 0 防错处理：当输入为空、非数字或无效时，自动 fallback 为 0，防止 NaN 结果；
- 语义清晰的变量命名：xInput / yInput 明确表示 DOM 元素，x / y 表示解析后的数值，提升可维护性。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- parseInt() 会截断小数（如 "3.14" → 3），若需保留小数请务必用 parseFloat()；
- + 操作符对字符串有隐式拼接行为（"2" + "3" === "23"），永远不要依赖隐式类型转换；
- 现代开发推荐使用 addEventListener 替代内联 onclick，更易测试与解耦（进阶实践）。
掌握“值在需要时读取 + 显式类型转换”这一原则，是避免 DOM 数值处理错误的核心基础。
