本文详解如何在网页中通过 JavaScript 获取两个 number 类型输入框的值，进行数值相加并弹出结果，重点解决因类型混淆导致的 [object HTMLInputElement] 错误及字符串拼接问题。
本文详解如何在网页中通过 javascript 获取两个 number 类型输入框的值，进行数值相加并弹出结果，重点解决因类型混淆导致的 `[object htmlinputelement]` 错误及字符串拼接问题。
在初学 Web 前端开发时，一个常见误区是：将 元素本身（DOM 对象）直接当作数值使用。你遇到的 "[object HTMLInputElement][object HTMLInputElement]" 报错，正是由于代码中错误地使用了 nodeValue（该属性不适用于 元素），且在页面加载时就提前读取了输入框的初始空值，而非点击提交时动态获取当前输入内容。
✅ 正确做法：延迟读值 + 类型转换
首先， 元素应通过 .value 属性获取用户输入的文本内容（注意：.value 返回的是字符串，即使 type="number" 也不自动转为数字）。其次，必须在事件触发（如点击按钮）时实时读取，而非在脚本加载阶段静态赋值。
以下是修复后的完整、可运行示例：
<title>简易加法计算器</title>
<script>
function sum() {
const xInput = document.getElementById('x');
const yInput = document.getElementById('y');
// 使用 parseFloat 安全转换（支持小数）或 parseInt（仅整数）
const x = parseFloat(xInput.value) || 0;
const y = parseFloat(yInput.value) || 0;
const result = x + y;
alert(`结果：${result}`);
}
</script>⚠️ 关键注意事项
- 不要用 nodeValue： 元素没有 nodeValue 属性，应统一使用 .value。
- 避免提前读值：若在 <script> 中直接 let x = ...value，此时输入框为空，后续点击时传入的仍是初始空字符串，无法响应用户最新输入。</script>
- 务必类型转换："1" + "2" 结果是 "12"（字符串拼接），需用 parseFloat() 或 Number() 转为数值再运算。
- 推荐 type="button" 而非 type="submit"：避免表单默认提交导致页面刷新；如需提交，应在 onclick 中添加 event.preventDefault()。
- 增强健壮性：使用 || 0 处理空值或非法输入（如非数字字符），防止 NaN 出现。
掌握 DOM 元素值的动态读取与数据类型处理，是前端交互开发的基础能力。理解“何时读值”和“如何转类型”，就能有效规避绝大多数表单计算类 Bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
