output标签不自动绑定输入控件，for属性仅用于可访问性提示；必须手动监听事件并用output.value更新值，否则无反应。
output 标签不会自动关联输入控件，for 属性只是语义提示，不触发任何逻辑绑定——你必须手动监听事件并更新 value。
为什么写了 for="a b" 却没反应？
浏览器根本不靠 for 属性去读取、计算或同步值。它只用于辅助技术（比如屏幕阅读器）理解“这个输出和哪些输入有关”。实际数据流完全由 JS 控制。
-
for值大小写敏感，id="A"和for="a"不匹配 - 动态插入的
input元素没设id，或设晚于output解析 - Safari 不支持运行时修改
output.for，改了也不重绑 - 用了
type="text"却只监听change，漏掉键盘输入、粘贴等场景
output.value 是唯一推荐的更新方式
写入 textContent 或 innerHTML 会绕过表单语义机制，导致可访问性降级、Safari 显示错乱、提交时拿不到值。
-
output.value = 123✅ 同步更新文本节点，兼容屏幕阅读器，支持表单提交（需带name） -
output.textContent = "123"⚠️ 能显示但不可靠：初始无内容时output.value是空字符串，两者不同步 -
output.innerHTML = "..."❌ 可能执行 XSS，且后续赋value会失效 - 初始值写在标签内（如
<output>0</output>）等价于value="0"，JS 中仍应统一用.value读写
如何正确绑定多个输入并实时更新？
不要依赖 for 自动聚合，每个输入都得显式监听；多个控件共用一个计算函数是安全且清晰的做法。
立即学习“前端免费学习笔记（深入）”；
- 用
addEventListener('input', handler)替代内联oninput，便于复用和调试 - 对每个输入值做容错转换：
parseFloat(input.value) || 0，避免NaN或字符串拼接 - 若涉及异步（如查价格 API），在
fetch回调里更新output.value，别阻塞主线程 - 表单重置（
<button type="reset">）不会清空output，需监听reset事件手动设output.value = "0"
真正容易被忽略的是：哪怕你把 for 写得完全正确，只要没监听事件、没调用 .value = ...，output 就永远静止不动——它不是响应式容器，只是个带语义的“画布”。
