output标签无自动计算功能，需JavaScript手动实现联动；其for属性仅用于无障碍，不触发行为；兼容性方面IE不支持，现代浏览器表现一致但需注意form属性设置、value与textContent选择及浮点误差处理。
output 标签本身不计算、不监听、不自动更新——它只是个带语义的空盒子，所有实时展示逻辑必须靠 JavaScript 手动写。
为什么直接写 <output></output> 什么也不显示
因为 output 没有默认行为：它不会读 for 属性去联动计算，也不会响应表单变化。常见错误包括：
– 只写了 <output for="a b"></output> 却没配 JS
– 把 for 指向 id，但实际控件只有 name（或反过来）
– 用 innerHTML 赋值，导致表单关联丢失或 XSS 风险
– 在 IE 中使用，而 IE11 及更早版本完全不支持 output 元素
output.value 和 output.textContent 到底该用哪个
选哪个取决于你是否需要它参与表单提交：
– 如果 output 在 <form> 内，且有 name 属性，用 output.value = ...：它会被 FormData 收集，也响应 form.reset()
– 如果只是纯展示（比如带单位、格式化文本），优先用 output.textContent = ...：兼容性更好，不依赖 form 结构，且避免 Safari 对 value 的不稳定支持
– 别混用：设了 textContent 后再读 value 会得 undefined；设了 value 但没 name，它不会出现在提交数据里
怎么让多个 input 实时驱动一个 output
不能靠 for="a b c" 自动联动，必须手写监听和兜底逻辑：
– 给每个相关 input 绑定 input 事件（不是 change），确保拖动滑块、连续输入都能响应
– 每次取值都用 parseFloat(input.value) || 0 或 Number(input.value) || 0，防止空输入、字母输入导致 NaN
– 把计算抽成独立函数，避免重复逻辑和嵌套判断
– 注意浮点误差：货币类用 (a + b).toFixed(2)，但返回的是字符串，后续若还要参与运算，得再 parseFloat()
– input[type="range"] 推荐用 input.valueAsNumber，比 parseFloat 更干净
兼容性和容易被忽略的坑
output 在现代浏览器（Chrome 10+、Firefox 4+、Safari 7+、Edge 13+）中表现一致，但以下几点极易被跳过：
– for 属性只对辅助技术有意义，对 JS 行为零影响；它匹配的是控件的 id（不是 name），且大小写、空格、连字符都敏感
– 动态插入的 output，必须在 appendChild 后立即设置 form 属性，否则 Safari 可能不认它属于表单
– 如果要兼容 IE，要么改用 <span> + JS 同步，要么加 polyfill（例如监听后写到同位置的 span 并同步 class）
– 表单重置时，只有带 form 属性（或位于 form 内）的 output 才会被清空；否则它就只是个静态文本容器
立即学习“前端免费学习笔记（深入）”；
