3个数字输入框求和无输出问题排查（函数与oninput已运行）

核心问题分析 #

你的代码存在两个关键错误：

• 直接对DOM元素本身执行加法运算，而非读取输入框的value属性值
• 输入框的value默认是字符串类型，直接相加会触发字符串拼接而非数字求和；同时未处理输入框为空的情况，会导致结果变成NaN

修复后的代码 #

JavaScript部分

function add_number() {
  // 获取实时输入值并转为数字，空值默认设为0
  var num1 = parseFloat(document.getElementById("num1").value) || 0;
  var num2 = parseFloat(document.getElementById("num2").value) || 0;
  var num3 = parseFloat(document.getElementById("num3").value) || 0;
  
  var result = num1 + num2 + num3;
  document.getElementById("total").value = result;
}

修复说明

1. 每次调用函数时获取最新输入值，避免提前缓存DOM元素导致无法拿到实时输入内容
2. 用parseFloat()将字符串转为数字，配合|| 0处理输入框为空的场景，防止出现NaN
3. 对数字类型的值执行加法，得到正确的求和结果

HTML部分（无需修改）

<table class="table table-bordered table-hover">
  <tbody>
    <tr>
      <th scope="row">number1</th>
      <td><input type="number" id="num1" name="number1" class="form-control" oninput="add_number()"></td>
    </tr>
    <tr>
      <th scope="row">number2</th>
      <td><input type="number" id="num2" name="number2" class="form-control" oninput="add_number()"></td>
    </tr>
    <tr>
      <th scope="row">number3</th>
      <td><input type="number" id="num3" name="number3" class="form-control" oninput="add_number()"></td>
    </tr>
    <tr>
      <th scope="row">Total</th>
      <td><input type="number" id="total" name="finaltotal" class="form-control"></td>
    </tr>
</table>

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