HTML无法计算优惠，必须用JavaScript实现：从data-price取价格并parseFloat转换，按data-bundle-id分组，对每组≥2件商品执行第二件半价（省最低价的50%），再用textContent更新.saving元素，注意移动端number输入兼容性。
HTML里没法直接算优惠，得靠JavaScript
HTML只是结构标记语言，display、innerHTML这些都只是“展示”，不参与计算。所谓“套装价格节省”，本质是：拿到多个商品价格，按规则（比如满300减50、第二件半价）算出总价和节省额，再把结果塞进页面。这一步必须用JavaScript做。
常见错误现象：Uncaught TypeError: Cannot read property 'value' of null——说明你试图用document.getElementById取一个还没加载出来的<input>；或者把价格写死在data-price里但没转成数字，导致"99"+"199"拼成"99199"而不是298。
- 价格数据建议统一放
data-price属性里，用parseFloat(el.dataset.price)转数字，别信innerText或textContent里的空格和¥符号 - 优惠规则别硬编码在JS里，用
data-discount-rule="bundle-2nd-half"这类语义化属性，方便后续换策略 - 计算触发时机：监听
change（复选框/数量输入）和input（实时数量变更），别只等click
怎么用JavaScript算“第二件半价”这种组合优惠
这不是简单加总，关键在识别“哪些属于同一套装”。典型场景：用户勾选了「iPhone 15」和「AirPods Pro」，后台标了它们同属bundle-id="apple-bundle-1"，而「MacBook」没标——那优惠只在这两个之间生效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给每个商品DOM节点加上
data-bundle-id，没值的视为不参与任何套装 - 用
document.querySelectorAll('[data-bundle-id]')抓出所有可能参与的项，再按dataset.bundleId分组 - 对每组执行规则：排序后取最低价，
Math.min(...prices)，然后从总价里减去这个值的一半（第二件半价=省原价一半） - 注意边界：只有一件？不减；三件？通常只免一件最便宜的，别自动套用到第三件
示例片段：
const items = document.querySelectorAll('[data-bundle-id]');
const groups = {};
items.forEach(item => {
const id = item.dataset.bundleId;
if (!groups[id]) groups[id] = [];
groups[id].push(parseFloat(item.dataset.price));
});
Object.values(groups).forEach(prices => {
if (prices.length >= 2) {
const minPrice = Math.min(...prices);
saved += minPrice * 0.5; // 省一半
}
});显示节省金额时DOM更新容易漏掉的三个点
用户改了数量、取消勾选、切了SKU，节省额变了，但页面没刷新——不是JS没算，而是DOM没同步。核心问题常出在定位和更新逻辑上。
- 别用
document.querySelector('.saving')全局找，多个套装时会只更新第一个；改用相对定位：item.closest('.bundle-group').querySelector('.saving') -
textContent比innerHTML更安全，避免XSS风险，也防止<span>¥50</span>被二次解析出错 - 数值格式化别手写
Math.round()：用saved.toFixed(2)保证两位小数，否则99.9显示成99.90000000000001
移动端适配时价格重算的隐藏陷阱
iOS Safari有个经典坑：input type="number"在部分机型上会把用户输入的100.5自动转成100,5（逗号分隔），导致parseFloat返回100，丢失小数。这不是你的计算逻辑错，是输入源污染了数据。
- 数量输入统一用
type="tel"+ 自定义键盘提示，避开系统number解析 - 监听
input事件时，对值做预处理：value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1')去除非数字和多余小数点 - 不要依赖
change事件等失焦才计算——用户点+号加购时，change根本不触发，得监听click和input双事件
复杂点不在算法本身，而在你怎么让不同设备、不同输入方式、不同用户操作路径，都稳定喂给JS一串干净的价格和数量。
