不会自动刷新，因其仅是语义化容器，不监听变化或绑定数据源，必须用JavaScript通过.value属性手动更新。
HTML 没有原生的 <output></output> 实时更新机制——它只是个语义化容器，更新全靠 JavaScript 手动赋值。
为什么 <output></output> 不会自动刷新
<output></output> 标签本身不监听任何变化，也不绑定表达式或数据源。浏览器只把它当普通表单输出区渲染，value 属性初始为空，后续内容必须由 JS 显式写入。
常见错误现象：
– 表单里写了 <output name="result"></output>，但用户改了 <input> 后它纹丝不动
– 以为加了 for 属性（如 for="a b"）就能自动关联计算结果 —— 实际上这个属性只用于辅助技术（如屏幕阅读器），不影响行为
- 使用场景：适合配合
oninput、onchange或表单提交后，把 JS 计算结果塞进去 - 性能影响：无额外开销，纯 DOM 写入，比用
<div> 略多一点语义成本，可忽略 <li>兼容性：IE10+ 支持，老 IE 需降级为 <code><span></span>或<div> <h3>怎么用 JS 正确更新 <code><output></output>核心就一句：
outputElement.value = newValue。注意必须用.value，不是.textContent或.innerHTML（虽然后者也能显示，但破坏表单语义和可访问性）。立即学习“前端免费学习笔记（深入）”；
示例（简易计算器）：
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)"> <input type="number" name="a" id="a"> + <input type="number" name="b" id="b"> = <output name="result" for="a b">0</output> </form>
-
oninput比onchange更及时（输入中即触发） -
for属性这里没实际作用，但保留有助于可访问性说明 - 如果计算逻辑复杂，别堆在 HTML 里，抽成函数调用更可控
- 务必做类型转换（如
parseInt()），否则字符串拼接会导致"2"+"3" → "23"
容易踩的坑：value 和 textContent 混用
很多开发者发现
output.textContent = "123"也能显示，就误以为等价。但这样会绕过表单 API，导致：
–form.elements.result.value读不到值
– 表单序列化（new FormData(form)）漏掉该字段
– 重置表单（form.reset()）无法清空它- 永远优先用
.value更新<output></output> - 如果要插入 HTML（比如带
<strong></strong>的提示），<output></output>不适合 —— 改用<div role="status"> 或其他语义化替代 <li>动态创建时，记得设置 <code>name属性，否则form.elements查不到
真正麻烦的不是怎么写，而是忘记它根本不“活”——所有“实时”都得你亲手连上事件、写好逻辑、兜住 NaN 和空值。一旦漏掉一个
parseInt或少绑一个oninput，它就安静地躺在那儿，假装自己很智能。 -
