output标签仅是语义化显示容器，必须用JavaScript驱动实时更新；正确做法是赋值output.value，而非textContent或innerHTML，以确保表单提交、无障碍支持和XSS防护；需手动监听input事件并处理数字转换、空值兜底及重置逻辑。
output 标签本身不参与计算，也不自动响应输入变化——所有“实时反馈”都靠你写的 JS 驱动；它只是个语义明确、表单友好的显示容器，value 属性是唯一推荐的读写入口。
为什么直接赋值 output.value 而不是 textContent 或 innerHTML
因为 output 是表单控件（虽不可输入），其 value 属性决定提交时的值，也影响可访问性行为。用 textContent 显示虽能看见结果，但 output.value 仍为空字符串，导致：表单序列化时漏掉该值、屏幕阅读器可能读不出最新数、Safari 下视图与值脱节。
-
output.value = "123"✅ 正确：同步更新显示 + 提交值 + 无障碍支持 -
output.textContent = "123"⚠️ 可见但语义断裂：提交时拿不到，output.value仍为"" -
output.innerHTML = "123"❌ 危险：若内容含用户输入（如拼接提示语），可能触发 XSS
oninput 事件必须监听，for 属性只是摆设
for="price qty" 不会自动把 price.value 和 qty.value 塞进 output，浏览器不做任何绑定或计算。它只在源码层面告诉辅助技术“这个输出和哪些控件逻辑相关”，对 JS 运行毫无影响。
- 真正起作用的是你写的
oninput或addEventListener('input', ...) -
onchange不够用：用户还没松手、还在拖滑块或粘贴时，它就不触发 - 移动端尤其要注意：
input[type="range"]在 Safari 上可能漏发input，建议补ontouchend回调兜底 - 多个输入共用一个计算逻辑？别给每个都写
oninput="calc()"，统一用addEventListener管理更可靠
数字转换和空值兜底是高频翻车点
用户删空输入框、粘贴字母、拖滑块到边界外——这些都会让 .value 成为字符串 "" 或非数字，直接 +input.value 会变成字符串拼接，parseFloat("") 返回 NaN，再加任何数都是 NaN。
立即学习“前端免费学习笔记（深入）”；
- 用
Number(input.value) || 0或parseFloat(input.value) ?? 0替代+input.value - 对
input[type="number"]，优先用input.valueAsNumber，它天然返回NaN而非空字符串，判断更干净 - 金额类结果记得格式化：
(result).toFixed(2)或new Intl.NumberFormat().format(result) - 初始值写在标签内：
<output id="total">0.00</output>，JS 中统一走output.value = ...
最易被忽略的是表单重置行为：<button type="reset"> 不会清空 output.value，它压根不是可重置控件。需要手动监听 form.reset 事件并重置 output.value，否则用户重填时看到的还是上一轮的旧结果。
