基于其他总数计算总体总数的Vanilla JavaScript

Question

我按照教程使用本地存储制作了一个购物车。现在我正在尝试调整它以适应自己的需求，扩展我的JavaScript知识并给自己更多的练习机会。教练为每个单独的商品总额（例如4根香蕉，每根0.25美元，总价1.00美元）创建了一个div，但我想在我的购物车底部添加一个“总计”部分。我正在努力想出一种计算它的方法。 以下是购物车的代码（最下面是我添加的总计代码）

我知道如何在我想要显示的地方设置新的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>

- redliz5808

---

提示：将您所有的单价收集到一个数组中，并使用reduce函数来计算总和。 - Chris M

我为您制作了一段代码片段。我不得不从排序中删除字符串，您需要向我们提供购物车内容。 - mplungjan

Answer 1

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

修改后的代码：（注释中有信息）

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);
}

- Scurgery

---

DRY. 不要重复自己。 - mplungjan

Answer 2

改变

s.forEach(item => {

到

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);

- mplungjan

---

谢谢！这太完美了！ - redliz5808