output标签需在form内、有name属性、关联控件有对应id才能正常工作；赋值必须用value而非textContent或innerHTML；for属性绑定的是id而非name。
output 标签不会自动更新，写完 HTML 就以为能联动是最大误区；它只是语义容器，所有计算和赋值必须靠 JavaScript 主动触发。
为什么 output.value 赋值后不显示
常见原因是没满足三个前提：它必须在 form 内（或显式设 form="xxx"）、有 name 属性、且目标控件有正确的 id。旧版 Safari 尤其敏感——output 不在表单上下文中时，value 赋值可能完全静默。
- 把
<output name="total"></output>放在<form>外面 → 渲染失效，reset 也不清空 - 写了
for="price"却没给对应<input>设id="price"→ 屏幕阅读器无法识别，Safari 可能拒绝响应 - 动态插入
output后，没立即设置form和name→ DOM 已挂载但语义未激活
监听哪个事件更可靠：input 还是 change
input 事件覆盖场景更全：键盘输入、粘贴、type="range" 拖动、iOS 语音输入都能捕获；change 只在失焦或回车时触发，用户还没点别处就看不到结果。
-
input[type="range"]在 iOS Safari 上偶发漏发input，建议补监听change或touchend - 两个
input共用一个 handler 时，快速切换焦点可能导致中间态（如一个为空、另一个为字母），必须对每个值做兜底：parseFloat(val) || 0 - 避免重复绑定：
addEventListener('input', handler)调用多次会导致函数执行多次，建议先removeEventListener或用委托
怎么安全地更新内容：value、textContent 还是 innerHTML
优先用 output.value = String(result) —— 它同步渲染、支持 form.reset()、可被 FormData 捕获、无障碍友好。若纯展示不提交，textContent 更稳；innerHTML 绝对禁用。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
-
output.textContent = result能显示，但部分 Safari 不触发重置，且提交时后端收不到该字段 -
output.innerHTML = '¥' + val有 XSS 风险（尤其结果来自 API 或用户输入），破坏语义结构 - 初始
<output>0</output>会设默认文本节点，首次 JS 赋值后value才被初始化；之前读output.value是空字符串，不是 bug
for 属性到底绑什么：id 还是 name
绑 id，且必须严格匹配：大小写、连字符、空格全算。它和 name 无关，也不参与任何计算逻辑，只用于辅助技术建立语义关联。
-
<input id="unit-price">对应<output for="unit-price">✅；for="unit price"❌（空格 ≠ 连字符） -
<input name="price">配<output for="price">→ 失效（for查的是id，不是name） -
for="a b c"是合法语法，但浏览器不解析它做自动求和，JS 仍需自己document.getElementById('a')取值
最容易被忽略的点是：output 的语义能力（重置、提交、无障碍）全部依赖 form 和 name 的存在，而 for 只是“声明谁影响了它”——写对了，JS 还得自己去取值、算、赋值，一步都不能少。
