购物车总价需用javascript实时监听数量变化并重新计算，html仅负责结构；应为每个数量input绑定input事件，遍历.cart-item读取data-price和.item-qty值，校验后整数运算防nan，删除商品后须显式调用更新函数。
购物车总价计算不是靠 HTML 自己完成的，HTML 只负责结构；必须用 JavaScript 实时监听数量变化并重新算价——否则用户改了数量，页面数字根本不会动。
为什么 input 改值后总价不更新？
HTML 的 <input type="number"> 本身不会触发任何计算逻辑。你看到价格没变，不是代码写错了，而是压根没写监听代码。
- 浏览器只渲染初始 HTML，
value变了，DOM 属性变了，但没人告诉 JS “该重新加总了” - 常见错误：只在页面加载时算一次总价，之后所有操作都不再调用计算函数
- 正确做法：给每个数量
input绑定input或change事件（推荐input，支持实时响应键盘输入）
getTotalPrice() 函数怎么写才不出错？
核心是遍历所有商品行，读取单价和数量，相乘累加。别硬写死元素索引，用 class 或 data 属性定位更稳。
- 每个商品行建议包在
<div class="cart-item"> 里，单价存 <code>data-price="29.9"，数量input加class="item-qty" - 避免用
parseFloat()直接转空字符串——先检查value是否为空或非数字，否则会得到NaN，整个总价就崩了 - 单价建议统一用分（整数）存储和计算，比如
data-price="2990"，最后再除以 100 显示，避免浮点误差
function getTotalPrice() {
let total = 0;
document.querySelectorAll('.cart-item').forEach(item => {
const price = parseInt(item.dataset.price) || 0;
const qtyInput = item.querySelector('.item-qty');
const qty = parseInt(qtyInput.value) || 0;
total += price * qty;
});
return total / 100; // 转回元
}
怎么让“删除商品”后总价自动重算？
删除按钮点击后，如果只是 remove() DOM，但没调用总价函数，界面上的总价就变成脏数据。
- 删除操作末尾必须显式调用
updateCartDisplay()这类函数（里面包含getTotalPrice()和更新显示逻辑） - 不要依赖事件委托去“猜”删的是哪一行——直接在删除按钮的
onclick里传入当前行元素，或用closest('.cart-item')向上找 - 如果用了框架（如 Vue/React），这里反而是最简单的；纯 HTML + JS 时，这一步最容易漏
真正难的不是写几行加法，而是确保每次 DOM 变化（输数字、删商品、勾选优惠）都有一条清晰的“触发 → 计算 → 更新”链路。少一环，用户就看到错误价格——而这种问题在线上往往只被用户截图反馈，很难复现。
