不自动更新，因其不监听其他表单控件变化，须用 JavaScript 显式设置 value 或 textContent；提交时默认不发送值，需额外 hidden 输入框同步。
为什么
很多人把 当成“会自己算数的 div”，结果绑了 oninput 也不刷新——根本原因是它**不会自动监听其他表单控件的变化**，必须手动赋值。浏览器只保证它语义上是“输出容器”，不提供绑定逻辑。
常见错误现象： 写好了，但没写 JS 赋值，页面始终空白；或用了 value 属性但没触发重绘（比如用 innerHTML 覆盖后丢失了 value 的表单关联性）。
- 必须用 JS 显式设置
outputElement.value = ...（推荐）或outputElement.textContent = ...（仅文本场景） - 如果想保留表单提交能力（比如把
值一起发给后端），得确保它有name属性且用.value赋值 - 不要用
innerHTML往里塞带标签的内容——它不是通用容器，语义和表单行为会失效
oninput vs onchange：该监听哪个事件？
实时计算的关键在于响应时机。oninput 在用户按键/拖动时立即触发（包括删除、粘贴），onchange 只在元素失去焦点时才触发。对数字输入框、范围滑块这类需要“边输边算”的场景，必须用 oninput。
使用场景差异：
-
或：用oninput，否则拖动滑块时卡住不动 -
或单选组：onchange更合适（选项切换本身是离散动作） - 注意兼容性：
oninput在 IE9+ 支持良好，但旧版 Safari 对contenteditable元素支持弱——不过本身不 editable，不用顾虑
如何让多个输入共同驱动一个
一个 往往依赖多个字段（比如价格 × 数量 = 总价）。不能只靠单个元素的事件，得统一收集、计算、更新。
实操建议：
- 给所有相关输入加同一个处理函数，比如
updateTotal() - 在函数里用
parseFloat()转数值，避免字符串拼接（"10" + "2"→"102"） - 对空值或非法输入做防御：用
isNaN()判断，返回0或空字符串，别让NaN直接进 - 示例：
<input type="number" id="price" oninput="updateTotal()"><br><input type="number" id="qty" oninput="updateTotal()"><br><output name="total" id="total">0</output><br><br><script><br>function updateTotal() {<br> const price = parseFloat(document.getElementById('price').value) || 0;<br> const qty = parseFloat(document.getElementById('qty').value) || 0;<br> document.getElementById('total').value = (price * qty).toFixed(2);<br>}<br></script>
为什么提交表单时
默认不参与表单提交——即使它有 name 属性，浏览器也不会把它当有效控件。这是规范行为，不是 bug。
解决路径只有两个：
- 如果只是展示，无需提交：忽略即可，用
textContent更新更轻量 - 如果后端真要这个值：额外加一个隐藏域
，并在 JS 计算时同步更新它的value（document.querySelector('[name="total"]').value = result） - 别试图用
form.elements拿到——它不在表单控件集合里，查不到
容易被忽略的是：很多人以为加了 name 就等于“可提交”，其实 的 name 仅用于脚本查找和 for 属性关联，和表单数据流无关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
