本文详解如何通过原生 JavaScript 实现两个 字段的实时加法计算，并将结果动态写入第三个只读输入框，全程无需用户点击任何按钮，解决因 dom 加载时机、事件绑定不当或脚本执行顺序导致的“不生效”问题。
本文详解如何通过原生 javascript 实现两个 `` 字段的实时加法计算，并将结果动态写入第三个只读输入框，全程无需用户点击任何按钮，解决因 dom 加载时机、事件绑定不当或脚本执行顺序导致的“不生效”问题。
在构建表单类应用（如培训工时统计系统）时，常需对多个数值输入项进行即时汇总。理想体验是：用户在任意输入框中键入数字后，总和立即更新——而非依赖“计算”按钮。但许多开发者会遇到「代码看似正确却无响应」的问题，根源往往不在逻辑本身，而在JavaScript 执行时机与事件选择不当。
✅ 正确方案：oninput + 函数内联 DOM 查询
原始代码失败的核心原因有二：
- 脚本过早执行：<script> 标签位于 <head> 中，此时 <input> 元素尚未被浏览器解析，document.getElementById("inhouse") 返回 NULL； </script>
- 事件误用：oninput 本是更优选择（支持粘贴、拖拽等所有值变更），但原代码中函数 showsum() 依赖外部变量 text1/text2，而这些变量在页面加载时无法获取 DOM 元素（因 DOM 未就绪）。
以下为修复后的完整、健壮、可直接运行的解决方案：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <title>Sahodaya 25 Report - Form</title> </head> <body> <div class="container my-3"> <form method="POST"> <fieldset disabled> <div class="mb-3"> <label for="disabledTextInput" class="form-label">Name</label> <input type="text" id="disabledTextInput" class="form-control" placeholder="<?php echo $_SESSION['name']?>" name="name" value="<?php echo $_SESSION['name']?>"> <label for="disabledTextInput2" class="form-label my-2">Email</label> <input type="text" id="disabledTextInput2" class="form-control" placeholder="<?php echo $_SESSION['email']?>" name="email" value="<?php echo $_SESSION['email']?>"> </div> </fieldset> <label for="inhouse" class="form-label">Inhouse Training Done In Hours</label> <input type="number" id="inhouse" class="form-control" placeholder="Type Here" name="inhouse" required oninput="calculateTotal()"><br> <label for="sahodaya" class="form-label">Sahodaya Training Done In Hours</label> <input type="number" id="sahodaya" class="form-control" placeholder="JSSC + PSCC (Both)" name="sahodaya" required oninput="calculateTotal()"><br> <label for="total" class="form-label">Total Hours Done</label> <input type="number" id="total" class="form-control" name="total" value="0" readonly><br> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> <!-- 将脚本移至 body 底部，确保 DOM 已加载 --> <script> function calculateTotal() { // 安全获取输入值并转为数字（NaN 时设为 0） const inhouse = parseFloat(document.getElementById('inhouse').value) || 0; const sahodaya = parseFloat(document.getElementById('sahodaya').value) || 0; const total = inhouse + sahodaya; // 写入结果（保留小数位数可选：total.toFixed(1)） document.getElementById('total').value = total; } </script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>? 关键改进说明
- ✅ 脚本位置优化：<script> 移至 </script>