本文详解如何在网页中通过“加入购物车”按钮触发事件，准确提取商品名称、价格和尺寸等 DOM 元素数据，存入 JavaScript 数组并实时渲染购物车列表与总价——重点解决因误用 <p> 标签 value 属性导致价格读取失败的核心问题。
本文详解如何在网页中通过“加入购物车”按钮触发事件，准确提取商品名称、价格和尺寸等 dom 元素数据，存入 javascript 数组并实时渲染购物车列表与总价——重点解决因误用 `
` 标签 `value` 属性导致价格读取失败的核心问题。
在构建前端购物车功能时，一个常见却容易被忽视的陷阱是：HTML <p> 标签不支持 value 属性。原代码中试图通过 document.getElementById(priceElementId)[0].value 获取价格，不仅语法错误（[0] 多余，因 getElementById 返回单个元素），更根本的是 <p id="price1" value="119,99"> 中的 value 属性完全无效——浏览器会忽略它，导致 price 始终为 undefined，最终 parseFloat(undefined) 得到 NaN，累加后总价恒为 0.00。
✅ 正确做法是：将价格文本内容直接置于元素内部（如 <p id="price1">119,99</p>），再通过 .textContent 或 .innerHTML 安全读取：
function addToCart(name, priceElementId, sizeElementId) {
// ✅ 正确：从 p 元素中提取纯文本价格（如 "119,99"）
const priceText = document.getElementById(priceElementId).textContent;
// 将逗号替换为点，适配 parseFloat（注意：生产环境建议使用 Intl.NumberFormat 或正则校验）
const price = parseFloat(priceText.replace(',', '.'));
const size = document.getElementById(sizeElementId).value;
const product = {
name,
size,
price // 确保为数值类型，而非字符串
};
cart.push(product);
updateCartDisplay();
}同时，需同步修正 HTML 结构：移除 <p> 上非法的 value 属性，并确保价格区域语义清晰、易于定位。推荐使用简洁的嵌套结构（无需额外 <div> 包裹，但需保证可读性）：
<h4>Green hoodie</h4>
<p>Price: <span id="price1">119,99</span> PLN</p>
<p>Choose size:</p>
<select id="size1">
<option value="xs">XS</option>
<option value="s">S</option>
<!-- ... -->
</select>
<button type="button" onclick="addToCart('Green hoodie', 'price1', 'size1')">ADD TO BASKET</button>⚠️ 注意事项：
- 价格格式兼容性：波兰语地区常用逗号作小数点（如 119,99），而 parseFloat() 仅识别英文句点。务必做 replace(',', '.') 预处理，否则解析结果为 119（截断小数）。
- DOM 查询安全：getElementById() 返回 null 时调用 .textContent 会报错。建议增加存在性校验：
const priceEl = document.getElementById(priceElementId); if (!priceEl) throw new Error(`Price element #${priceElementId} not found`); const price = parseFloat(priceEl.textContent.replace(',', '.'));- 避免内联事件处理器：onclick="addToCart(...)" 不利于维护和测试。推荐改为 addEventListener + 数据属性（如 data-product-name），实现逻辑与模板解耦。
- 浮点精度问题：货币计算应避免直接使用 parseFloat 累加（可能产生 0.1 + 0.2 === 0.30000000000000004）。生产环境建议以分（cents）为单位存储整数，或使用 Intl.NumberFormat 格式化显示。
购物车渲染逻辑本身正确，但需确保 updateCartDisplay() 在每次添加后被调用（已满足）。最终效果：点击商品“ADD TO BASKET”后，cart 数组准确记录商品信息；点击“Go to basket”时，<div id="cartItems"> 动态生成每项商品的 <p> 节点，<p id="totalPrice"> 显示精确到两位小数的总金额（如 Total price: 259.98 PLN）。
掌握这一数据采集原则——区分语义标签能力、善用文本内容提取、预处理本地化数字格式——是构建健壮交互式电商前端的关键基础。
