如何使用JavaScript中的“添加到购物车”按钮将我的商品添加到购物车

介绍

在电子商务网站上，添加商品到购物车是一项常见且基本的功能。在本文中，我们将使用JavaScript编写代码来实现此功能。我们将讨论如何创建一个”添加到购物车”按钮，并使用JavaScript来处理用户点击按钮时的事件，以及如何将商品添加到购物车中。

准备工作

在开始编写代码之前，我们需要创建一些HTML和CSS来创建一个模拟的商品列表和购物车。首先，我们需要创建一个商品列表。下面是一个简单的例子，其中包含三个商品。

<!DOCTYPE html>
<html>
<head>
    <title>Add to Cart</title>
    <style>
        .product {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
        }
        .add-to-cart {
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="product">
        <h3>商品 1</h3>
        <p>价格： $10</p> <button class="add-to-cart">添加到购物车</button> </div> <div class="product"> <h3>商品 2</h3> <p>价格：$ 20</p>
        <button class="add-to-cart">添加到购物车</button>
    </div>
    <div class="product">
        <h3>商品 3</h3>
        <p>价格： $30</p> <button class="add-to-cart">添加到购物车</button> </div> <div id="cart"> <h2>购物车</h2> <ul id="cart-items"></ul> <p id="total">总计：$ 0</p>
    </div>
</body>
</html>

以上代码创建了一个简单的商品列表，并在每个商品下方放置了一个“添加到购物车”的按钮。在页面底部，我们还创建了一个购物车部分，其中显示了添加到购物车的商品和总计金额。

编写JavaScript代码

现在，我们将编写JavaScript代码来处理用户点击“添加到购物车”按钮时的事件，并将选中的商品添加到购物车中。

首先，让我们为每个“添加到购物车”按钮添加一个点击事件处理程序。我们可以使用addEventListener方法来实现。

// 获取所有的 "添加到购物车" 按钮
const addToCartButtons = document.getElementsByClassName('add-to-cart');

// 为每个按钮添加点击事件处理程序
for (let i = 0; i < addToCartButtons.length; i++) {
    addToCartButtons[i].addEventListener('click', addToCart);
}

上面的代码使用getElementsByClassName方法获取了所有的“添加到购物车”按钮，并为每个按钮添加了一个点击事件处理程序addToCart。

现在，我们需要编写addToCart函数来处理用户点击按钮时的事件，以及将选中的商品添加到购物车中。

// 购物车数组，用于存储添加到购物车的商品
let cartItems = [];

// 点击事件处理程序
function addToCart(event) {
    // 获取所点击的按钮所在的商品元素
    const product = event.target.parentElement;

    // 获取商品的标题和价格
    const title = product.querySelector('h3').innerText;
    const price = product.querySelector('p').innerText;

    // 创建新的购物车项
    const cartItem = {
        title: title,
        price: price
    };

    // 将购物车项添加到购物车数组中
    cartItems.push(cartItem);

    // 更新购物车显示
    updateCart();
}

在上述代码中，我们首先获取所点击的按钮所在的商品元素。然后，我们从商品元素中获取商品的标题和价格。接下来，我们创建一个新的购物车项对象，并将其添加到购物车数组中。最后，我们调用updateCart函数来更新购物车的显示。

接下来，我们将实现updateCart函数来更新购物车的显示。

// 更新购物车的显示
function updateCart() {
    // 获取购物车元素
    const cartElement = document.getElementById('cart-items');

    // 清空购物车元素
    cartElement.innerHTML = '';

    // 计算总计金额
    let total = 0;

    // 遍历购物车数组中的每个购物车项
    for (let i = 0; i < cartItems.length; i++) {
        const cartItem = cartItems[i];

        // 创建购物车项的HTML元素
        const cartItemElement = document.createElement('li');
        cartItemElement.innerText = cartItem.title + ' - ' + cartItem.price;

        // 将购物车项添加到购物车元素中
        cartElement.appendChild(cartItemElement);

        // 更新总计金额
        total += parseFloat(cartItem.price.slice(1));
    }

    // 获取总计元素并更新显示
    const totalElement = document.getElementById('total');
    totalElement.innerText = '总计：$' + total.toFixed(2);
}

在上述代码中，我们首先获取购物车元素，并清空其中的内容。然后，我们遍历购物车数组中的每个购物车项。对于每个购物车项，我们创建一个包含商品标题和价格的HTML元素，并将其添加到购物车元素中。同时，我们还计算出购物车中所有商品的总计金额，并将其显示在页面中。