在线商店购物车功能异常：点击加入购物车后数据未正确统计

问题现象 #

开发简易在线商店，期望点击「ADD TO BASKET」按钮后获取商品名称、价格、尺寸并加入购物车；点击「Go to Basket」按钮展示购物车区域，显示选中商品信息并计算总价。但实际操作后购物车为空，总价显示为0.00。

错误原因与修复点 #

• 价格获取逻辑错误：
  JS中document.getElementById(priceElementId)[0].value写法错误，<p>标签不是表单集合元素，没有[0]属性；且<p>的value属于自定义属性，需用getAttribute("value")获取。另外价格用逗号作为小数分隔符，parseFloat无法识别，需替换为小数点。
• 参数传递错误：
  第二个商品的「ADD TO BASKET」按钮中，价格元素ID传成了cena2，但对应HTML里的<p>标签ID是price2，导致无法获取价格。
• 购物车展示文本错误：
  updateCartDisplay函数里重复写了「Size:」，应改为「Price:」，否则商品信息显示混乱。

修正后的代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>Goodclothes</title>
    <link rel="icon" type="image/x-icon" href="bluza_ikona.png">
    <script defer src="script.js"></script>
</head>
<body>
    <form style="border: 1px solid; background-color: #F5F2E9;" class="container">
        <h1 style="text-align: center;"><i>Goodclothes</i></h1>
        <fieldset>
            <legend class="maint">OUR PRODUCTS</legend>
            <div name="Green hoodie">
                <a onMouseOver='change1.src="green2.jpg"' onMouseOut='change1.src="green1.jpg"'>
                    <img src="green1.jpg" id="change1" alt="Green hoodie" border="0" width= "212" height= "318">
                </a>
                <h4>Green hoodie</h4>
                <p id="price1" value="119,99">Price: 119,99 PLN</p><br>
                <p>Choose size:</p>
                <select id="size1">
                    <option value="xs">XS</option>
                    <option value="s">S</option>
                    <option value="m">M</option>
                    <option value="l">L</option>
                    <option value="xl">XL</option>
                    <option value="xxl">XXL</option>
                </select>
                <br><br>
                <button type="button" class="addToCart" onclick="addToCart('Green hoodie', 'price1', 'size1')">ADD TO BASKET </button>
            </div>
        </fieldset>
        
        <fieldset>
            <div>
                <a onMouseOver='change2.src="ablack2.jpg"' onMouseOut='change2.src="ablack1.jpg"'>
                    <img src="ablack1.jpg" id="change2" alt="Black hoodie Asian Style" border="0" width="212" height="318">
                </a>
                <h4>Black hoodie asian style</h4>
                <p id="price2" value="139,99">Price: 139,99 PLN</p>
                <p>Choose size:</p>
                <select id="size2">
                    <option value="xs">XS</option>
                    <option value="s">S</option>
                    <option value="m">M</option>
                    <option value="l">L</option>
                    <option value="xl">XL</option>
                    <option value="xxl">XXL</option>
                </select>
                <br><br>
                <button type="button" class="addToCart" onclick="addToCart('Black hoodie asian style', 'price2', 'size2')">ADD TO BASKET</button>
            </div>
        </fieldset> <br>
    </form>
    
    <div align="center">
        <button type="button" class="addToCart" id="bucket" onclick="openBucket()">Go to basket</button>
    </div>
    
    <div id="cart" style="display: none;">
        <h2>BASKET</h2>
        <div id="cartItems"></div>
        <p id="totalPrice"></p>
    </div>
</body>
</html>

JavaScript代码 #

var cart = [];

function addToCart(name, priceElementId, sizeElementId) {
    var priceElement = document.getElementById(priceElementId);
    // 获取自定义value属性并替换逗号为小数点
    var priceStr = priceElement.getAttribute("value").replace(",", ".");
    var price = parseFloat(priceStr);
    var size = document.getElementById(sizeElementId).value;
    
    console.log("Adding to basket:", name, price, size);
    
    var product = {
        name: name,
        size: size,
        price: price,
    };
    
    cart.push(product);
    
    console.log("Basket after adding:", cart);
    
    updateCartDisplay();
}

function updateCartDisplay() {
    var cartItemsDiv = document.getElementById("cartItems");
    var totalPriceParagraph = document.getElementById("totalPrice");
    
    cartItemsDiv.innerHTML = '';
    
    var totalPrice = cart.reduce(function (sum, product) {
        return sum + product.price;
    }, 0);

    cart.forEach(function (product) {
        var productInfo = document.createElement("p");
        // 修正重复的Size文本为Price
        productInfo.textContent = product.name + " - Size: " + product.size + " - Price: " + product.price.toFixed(2) + " PLN";
        cartItemsDiv.appendChild(productInfo);
    });
    totalPriceParagraph.textContent = "Total price: " + totalPrice.toFixed(2) + " PLN";
}

function openBucket() {
    var cartDiv = document.getElementById("cart");
    cartDiv.style.display = "block";
    
    updateCartDisplay();
}

内容的提问来源于stack exchange，提问作者Pythonman21