Question

我需要计算添加到我的购物车中的所有产品的总价。相反，它显示所有产品的总价和一种产品的价格，一种产品的价格，一种又一种添加。我无法修复它。我将添加我的一段代码：

JS：

//    CART:
let cart = (JSON.parse(localStorage.getItem(".cart")) || []);
const cartDOM = document.querySelector(".cart");
const addToCartButtonsDOM = document.querySelectorAll('[data-action="ADD_TO_CART"]');
const deleteNoItemsInTheCart = document.getElementById("delete");
const itemsDOM = document.querySelector(".items");
const prices0Dom = document.querySelector(".pricesDom");
const totalPrice = document.getElementById("total");
const totalPriceDom =  document.querySelector(".total1");

//    add to cart:
addToCartButtonsDOM.forEach(addToCartButtonDOM => {
    addToCartButtonDOM.addEventListener("click", () => {
        const productDOM = addToCartButtonDOM.parentNode;
        const product = {
            name: productDOM.querySelector("#product__name").innerText,
            price: productDOM.querySelector("#product__price").innerText,
            quantity: 1,
        };
        const isInCart = (cart.filter(cartItem => (cartItem.name === product.name)).length > 0);
        if (!isInCart) {
            insertItemToDOM(product);
            cart.push(product);
            localStorage.setItem("cart", JSON.stringify(cart));
            addToCartButtonDOM.innerText = "In Cart";
            deleteNoItemsInTheCart.remove();
            totalPriceDom1();
        }
    });
});

//    display items, which were added to cart, in a basket message:
function insertItemToDOM(product) {
    cartDOM.insertAdjacentHTML("beforeend", `<div class="cartDOM"><br>
    <p>${product.name}<br>${product.price}</p></div>`);
}

//    delete all:
function deleteAllButton() {
    cartDOM.remove();
    itemsDOM.insertAdjacentHTML("beforeend", `<p class="noItems">No
    items in the cart</p>`);
    totalPriceDom.remove();
    prices0Dom.insertAdjacentHTML("beforeend", `<p class="prices0Dom">Total price: 0$</p>`);
}

// calculate total price
function calculateTotalPrice() {
  return cart.reduce((acc, cartItem) => {
    const price = parseInt(cartItem.price.slice(0, cartItem.price.length - 1));
    const quantity = cartItem.quantity;
    return acc + price * quantity;
  }, 0);
}

//    display total price in a basket message:
function totalPriceDom1() {
    totalPrice.remove();
    const total = calculateTotalPrice(); // new code
    totalPriceDom.insertAdjacentHTML("beforeend", `<p class="totalPrice">Total price: ${total}$</p>`);
}

https://codepen.io/tatarusetskaya/pen/XWpzNZa

Answer 1

只需替换 110 行：
totalPriceDom.insertAdjacentHTML("beforeend", `<p class="totalPrice">Total price: ${total}$</p>`);
与：
totalPriceDom.innerHTML = `<p class="totalPrice">Total price: ${total}$</p>`;

如果你不想使用innerHTML，那么使用

while (totalPriceDom.firstChild) {
  totalPriceDom.firstChild.remove();
}

totalPriceDom.insertAdjacentHTML("beforeend", `<p class="totalPrice">Total price: ${total}$</p>`);

如何计算购物车中所有商品的总价？

1 个答案: