我按照教程使用本地存储制作了一个购物车。现在我正在尝试调整它以适应自己的需求,扩展我的JavaScript知识并给自己更多的练习机会。教练为每个单独的商品总额(例如4根香蕉,每根0.25美元,总价1.00美元)创建了一个div,但我想在我的购物车底部添加一个“总计”部分。我正在努力想出一种计算它的方法。
以下是购物车的代码(最下面是我添加的总计代码)
我知道如何在我想要显示的地方设置新的div,但我无法弄清楚如何计算总计。我知道我需要基于单个购物车商品来计算它,因此这将在设置"cost"变量的行上进行,但我尝试了一些事情,显然不知道我在做什么,请帮帮我!
我知道如何在我想要显示的地方设置新的div,但我无法弄清楚如何计算总计。我知道我需要基于单个购物车商品来计算它,因此这将在设置"cost"变量的行上进行,但我尝试了一些事情,显然不知道我在做什么,请帮帮我!
const CART = []
function showCart() {
let cartSection = document.getElementById("cart");
cartSection.innerHTML = "";
let s = CART.sort();
s.forEach(item => {
let cartitem = document.createElement("div");
cartitem.className = "cart-item";
let title = document.createElement("h3");
title.textContent = item.title;
title.className = "title";
cartitem.appendChild(title);
let controls = document.createElement("div");
controls.className = "controls";
cartitem.appendChild(controls);
let plus = document.createElement("span");
plus.textContent = "+";
plus.setAttribute("data-id", item.id);
controls.appendChild(plus);
plus.addEventListener("click", incrementCart);
let qty = document.createElement("span");
qty.textContent = item.qty;
controls.appendChild(qty);
let minus = document.createElement("span");
minus.textContent = "-";
minus.setAttribute("data-id", item.id);
controls.appendChild(minus);
minus.addEventListener("click", decrementCart);
let price = document.createElement("div");
price.className = "price";
let cost = new Intl.NumberFormat("en-CA", {
style: "currency",
currency: "CAD"
}).format(item.qty * item.itemPrice);
price.textContent = cost;
cartitem.appendChild(price);
cartSection.appendChild(cartitem);
});
let total = document.createElement("div");
total.className = "total";
// Insert "grandTotal" code here.
const grandTotal = 0
total.textContent = grandTotal;
cartSection.appendChild(total);
}
showCart()
<div id="cart"></div>