output.value是唯一可靠的数据写入方式，必须用.value而非.textContent或.innerHTML；for属性必不可少，否则output退化为普通span；需配合hidden input才能提交数据。
output.value 是唯一可靠的数据写入方式
直接给 output 元素赋值必须用 .value，不是 .textContent，更不能用 .innerHTML。虽然部分浏览器对 textContent 有兼容性表现，但首次读取 output.value 会返回空字符串（除非 DOM 中已有默认文本），而表单重置时只有 .value 能被自动清空。
常见错误现象：output.textContent = "123" 看似显示正常，但提交表单时服务端收不到该值；若之后再调用 output.value，可能返回旧值或空字符串，尤其在 Safari 中容易脱节。
-
output.value = String(result)✅ 推荐：语义正确、支持 reset、无障碍友好 -
output.textContent = result⚠️ 可用但风险高：初始无内容时无法保证与 value 同步 -
output.innerHTML = result❌ 禁止：若 result 来自用户输入（如单位、描述），极易触发 XSS
for 属性不是可选项，而是语义和功能的分水岭
for 属性不参与计算，但它决定了 output 是否被浏览器识别为“表单输出容器”。省略它，output 就退化成一个普通 span：屏幕阅读器无法建立关联，form.reset() 不会清空它，甚至某些旧版 Safari 下 .value 赋值都无效。
常见错误现象：写了 <output id="total">0</output>，JS 也更新了 .value，但移动端 Safari 里始终不显示；检查发现 for 缺失或 ID 大小写不一致（如控件是 id="Price"，for="price" 就失效）。
立即学习“前端免费学习笔记（深入）”；
-
for值必须严格匹配控件的id，大小写敏感、不可含多余空格 - 多个控件用空格分隔：
for="a b c"合法，但 JS 仍需自行聚合计算逻辑 - 动态插入的控件，务必在插入后立即设好
id，再绑定事件——Safari 不支持运行时更新for关联
oninput + addEventListener 是最稳的事件组合
oninput 比 onchange 更及时，能响应键盘输入、粘贴、拖动滑块等所有实时变更；但内联写法（如 oninput="calc()"）难以复用和调试。推荐用 addEventListener 统一管理多个控件。
常见错误现象：只监听了 input[type="number"]，却忘了 input[type="range"] 在 iOS Safari 上拖动时 input 事件可能漏发，导致 output 卡在旧值。
- 对
range类型，补监听ontouchend或change防漏 - 用
parseFloat()而非parseInt()或Number()：前者对空字符串、空格更容错（parseFloat("") === NaN→ 可转为0） - 避免重复绑定：同一元素多次调用
addEventListener('input', handler)会导致函数执行多次
output 不参与表单提交，必须配 hidden input 才能传值
output 标签没有 value 属性（HTML 规范中它只有 name、for、form），它的 .value 是 JS 模拟的 DOM 属性，浏览器原生不将其纳入表单数据序列化流程。服务端永远收不到 output 的值。
常见错误现象：表单提交后后端日志里找不到 total 字段，排查发现只用了 <output name="total"></output>，没加隐藏域。
- 必须额外加：
<input type="hidden" name="total"> - 在 JS 计算后同步更新：
document.querySelector('input[name="total"]').value = result - 别依赖
required或:valid伪类——output永远不会触发这些状态
最容易被忽略的是：output 的“动态”完全依赖你写的 JS，浏览器不提供任何自动绑定或响应式机制。哪怕 for 属性写对了、value 也赋值了，只要事件没绑上、类型没转对、或者控件是动态插入却没重绑，它就只是个安静的空标签。
