output标签仅为语义容器，不自动计算或更新；for属性仅辅助无障碍，不触发逻辑；实时展示必须由JavaScript手动读值、计算、写值，否则显示空白或旧值。
output 标签本身不计算、不监听、不自动更新，它只是一个语义化容器；所有实时展示都必须靠 JavaScript 手动读值、算值、写值。
为什么直接写 <output for="a b"></output> 不显示结果
因为 for 属性只用于辅助技术（如屏幕阅读器）建立语义关联，浏览器完全不据此触发任何计算或更新逻辑。常见错误是以为写了 for="price qty" 就能自动求积——它不会。你看到空白或旧值，不是标签坏了，是根本没写 JS 更新逻辑。
oninput 放在 <form> 上比单独绑每个 input 更可靠
利用表单原生的 oninput 事件，可一次性捕获内部所有可交互控件的变化（包括 type="number"、type="range"、type="text"），避免重复监听和遗漏：
-
oninput在键盘输入、粘贴、拖动滑块时立即触发，比change更及时 - 表达式中引用的变量名必须与
input的name一致（不是id），且output必须有name - 示例：
<form oninput="total.value = parseFloat(price.value) * parseInt(qty.value) || 0"> - 若
input没设name，或output没设name，表达式里的price、total就无法解析
output.value 和 textContent 该用哪个
选哪个取决于你是否需要这个值参与表单提交：
立即学习“前端免费学习笔记（深入）”；
- 要提交：必须设
name，并用output.value = String(result)—— 否则后端收不到字段 - 纯展示：优先用
output.textContent = result，兼容性更稳，尤其在旧版 Safari 中value可能首次赋值不渲染 - 别用
innerHTML：有 XSS 风险，且破坏无障碍结构 - 注意
toFixed()返回字符串，如果后续还要参与运算，得再parseFloat()
多个输入联动时怎么防 NaN 和重复触发
两个 input 共用一个更新函数时，用户快速切换或粘贴非法内容，容易让中间态（如一个为空、另一个为字母）导致 NaN 输出：
- 每个输入值都做兜底：
parseFloat(val) || 0，别信val * 1（对空格字符串返回NaN） - 把计算逻辑抽成独立函数，事件回调里只做「取值 → 计算 → 写入」三步
- 避免多次调用
addEventListener('input', handler)，否则会重复执行 - 不需要加防抖，但可加简单跳过：
if (!price.value.trim() || !qty.value.trim()) return
真正容易被忽略的是：output 的 for 属性绑定的是 name（不是 id），而 form 属性决定它能否响应 reset() 和被 FormData 收集——这两件事互不替代，但常被混为一谈。
