Question

我按照教程制作了一个使用 localstorage 的购物车。现在我正在尝试对其进行调整以适应我自己的需要，以扩展我的 JavaScript 知识并给自己更多的练习。讲师为每个单独的项目总计制作了一个 div（即 4 个香蕉，0.25 美元是 1.00 美元），但我想在我的购物车底部添加一个“总计”部分。我正在努力寻找一种计算方法。这是购物车的代码（最底部是我为总数添加的代码）

我知道如何以及在何处设置新 div，以便它显示在我想要的位置，但我不知道如何计算总计。我知道我需要根据单个购物车项目来确定它，因此这将在设置“成本”变量的线上，但已经尝试了一些事情并且显然不知道我在做什么。帮助！

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>

Answer 1

您可以在 foreach 之外使用一个变量并将每个项目的成本添加到它。

您修改后的代码：（commnets 中的信息）

function showCart() {
  let cartSection = document.getElementById("cart");
  cartSection.innerHTML = "";
  let s = CART.sort("qty");
  // a grandTotal variable outside the foreach
  let grandTotal = 0;
  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);
    
    // add cost to total
    grandTotal += item.qty * item.itemPrice;
  });
  
  let total = document.createElement("div");
  total.className = "total";
  // format grandTotal or use it as you like it
  console.log(grandTotal);
  total.textContent = grandTotal;

  cartSection.appendChild(total);
}

Answer 2

改变

let grandTotal = 0;
s.forEach(item => {

到

let cost = new Intl.NumberFormat("en-CA", {
      style: "currency",
      currency: "CAD"
    }).format(item.qty * item.itemPrice);

和改变

const val = item.qty * item.itemPrice;
grandTotal += val;
let cost = new Intl.NumberFormat("en-CA", {
      style: "currency",
      currency: "CAD"
    }).format(val);

到

kernel.zip

基于其他总计 Vanilla JavaScript 计算总计

2 个答案: