用HTML+JS实现实时算价需监听input事件，用parseFloat()转数字，将结果写入或元素；注意初始值、NaN防护及IE兼容性，小项目无需第三方库。
怎么用 HTML + JS 实现一个能实时算价的表单
纯 HTML 无法动态计算价格，必须配合 JavaScript。常见错误是只写 <form></form> 和 <input type="number">，但没绑定事件，导致用户改了数值，页面毫无反应。
核心做法是监听输入变化，读取 value，做运算，再把结果写进某个 <span></span> 或 <output></output> 元素。别用 alert() 或 console.log() 当“结果”，那不算插入到页面里。
- 推荐用
input事件（不是change），它在每次按键/粘贴后立刻触发，体验更实时 - 所有数字输入都要用
parseFloat()转，别直接拼接字符串，否则"10" + "5"得到"105" - 记得给输入框设
value初始值（比如value="0"），否则第一次读input.value可能是空字符串，parseFloat("")返回NaN
为什么 <output></output> 比 <span></span> 更合适
<output></output> 是语义化标签，原生支持 for 属性关联表单控件，部分屏幕阅读器会识别它的“计算结果”角色；而 <span></span> 纯属容器，得靠 class 或 aria-label 补充说明。
但它不是万能的：IE 完全不支持 <output></output>，如果要兼容 IE，老老实实用 <span id="price-result"></span> 更稳妥。
立即学习“前端免费学习笔记（深入）”；
- 用法示例：
<output name="total" for="qty price-per-unit">0.00</output> - JS 中更新它：
document.querySelector('output[name="total"]').value = (qty * unitPrice).toFixed(2); - 注意：
<output></output>的内容用.value写，不是.textContent—— 后者会破坏其表单关联性
遇到 NaN 或价格突然变 0 怎么排查
90% 是因为某项输入为空、带单位（如用户输 “10元”）、或被其他脚本清空过值。浏览器不会报错，只会让计算结果变成 NaN，再传给 .toFixed() 就崩成 "NaN" 字符串，或者静默失败为 0。
- 先检查每个
input的value是否真的可转成数：console.log(typeof parseFloat(input.value), parseFloat(input.value)) - 加一层保护：
const qty = parseFloat(document.getElementById("qty").value) || 0;，避免NaN传染整个公式 - 如果用了
type="number"却仍收到非数字，可能是用户手动改了 HTML 或用了剪贴板粘贴含空格/逗号的文本
要不要用第三方库（比如 jQuery 或 Alpine.js）
小计算器没必要。原生 JS 30 行内搞定，加库反而增加加载时间、引入兼容性问题（比如 jQuery 不支持现代 ESM）。Alpine.js 虽轻量，但如果你只为了响应几个输入框就引入它，等于为螺丝刀配一套工具箱。
真要简化逻辑，可以封装一个复用函数，而不是换框架：
function bindCalc(triggerInputs, calcFn, outputEl) {
triggerInputs.forEach(el => el.addEventListener('input', () => {
const result = calcFn();
if (!isNaN(result)) outputEl.textContent = result.toFixed(2);
}));
}调用时传入 [qtyInput, unitInput]、计算逻辑、目标元素即可。复杂点在于多条件联动（比如选不同规格切换单价），那种才值得考虑 Alpine 或 Vue。
