本文详解如何通过原生 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>
