我想遍历我的数组并计算我的值-JavaScript

Question

我希望能够循环我的数组并计算总价并将其显示在控制台中。这应该是一个购物车应用程序。我将所有锚标签分配给循环通过锚标签的购物车变量，并将标签分配给我的饮料数组中的值以便能够显示它，但我无法显示所有价格的总额。

html

<section id="menu">
    <h2>Menu</h2>
    <p>Click an item to add it to your order.</p>
    <ul class="coffeeMenu">
        <li><a id="espresso" class="add-to-cart" href="#"></a></li>
        <li><a id="latte" class="add-to-cart" href="#"></a></li>
        <li><a id="cappuccino" class="add-to-cart" href="#"></a></li>
        <li><a id="coffee" class="add-to-cart" href="#"></a></li>
        <li><a id="biscotti" class="add-to-cart" href="#"></a></li>
        <li><a id="scone" class="add-to-cart " href="#"></a></li>
    </ul>
</section>

javascript

  let cart = document.querySelectorAll('.add-to-cart');

  let beverages = [{
    name: 'espresso',
    price: 1.95,
    inCart: 0,
},
{
    name: 'latte',
    price: 2.95,
    inCart: 0,
},
{
    name: 'cappuccino',
    price: 3.45,
    inCart: 0,
},
{
    name: 'coffee',
    price: 1.75,
    inCart: 0,
},
{
    name: 'biscotti',
    price: 1.95,
    inCart: 0,
},
{
    name: 'scone',
    price: 2.95,
    inCart: 0,
},
   //run a loop to through the images and the array
 for (let i = 0; i < cart.length; i++) {
cart[i].addEventListener('click', () => {
    cartNumber(beverages[i]);
    // totalCost(beverages[i]);
    })
  }



   // display the prices in the textarea

 let cartNumber = (beverages) => {
document.getElementById("order").textContent += beverages.name + " = "+ beverages.price 
    +"\n"
let productNumbers = localStorage.getItem('cartNumber')
productNumbers = parseInt(productNumbers);
if (productNumbers) {
    localStorage.setItem('cartNumber', productNumbers + 1);
    document.getElementById("total").textContent
} else {
    localStorage.setItem("cartNumber", 1);
    document.getElementById('tot').textContent = 1;

   for (let i = 0; i < cart.length; i++) {
    cart[i].addEventListener('click', () => {
    for(var price in beverages ) {
        console.log(price, beverages["prices"])
    }
})
   }

      console.log(beverages["price"]);

    let totalCost = (beverages) => {
        let cartCost = localStorage.getItem('totalCost');
        console.log(cartCost)
        if(cartCost != null) {
            cartCost = parseInt(cartCost);
            localStorage.setItem("totalCost", cartCost + beverages.price)
            document.getElementById("total").textContent = "$" + cartCost ;
            document.getElementById("cartTotal").textContent = cartCost;
    
    
            
        } else {
        localStorage.setItem("totalCost",  beverages.price)
        }
    }

Answer 1

而不是写太多和循环......看到这个，它可能会帮助你建立你愿意的东西

HTML

<section id="menu">
  <h2>Menu</h2>
  <p>
    Click an item to add it to your order.
  </p>
  <ul class="coffeeMenu">
    <li><a onclick="add_to_cart('espresso')" class="add-to-cart">espresso</a></li>
    <li><a onclick="add_to_cart('latte')" id="latte" class="add-to-cart">latte</a></li>
    <li><a onclick="add_to_cart('cappuccino')" id="cappuccino" class="add-to-cart">cappuccino</a></li>
    <li><a onclick="add_to_cart('coffee')" id="coffee" class="add-to-cart">coffee</a></li>
    <li><a onclick="add_to_cart('biscotti')" id="biscotti" class="add-to-cart">biscotti</a></li>
    <li><a onclick="add_to_cart('scone')" class="add-to-cart ">scone</a></li>
  </ul>
  <button id="total" onclick="cart_total()">Total</button>
</section>

JS

  let beverages = [{
    name: 'espresso',
    price: 1.95
  },
    {
      name: 'latte',
      price: 2.95
    },
    {
      name: 'cappuccino',
      price: 3.45
    },
    {
      name: 'coffee',
      price: 1.75
    },
    {
      name: 'biscotti',
      price: 1.95
    },
    {
      name: 'scone',
      price: 2.95
    }]

  let cart = [];
  let sum = 0;


  function add_to_cart(item) {
    let qty = prompt('Please enter quantity ')
    qty = parseInt(qty);
    if (isNaN(qty)) {
      qty = 1
    }
    cart.push({
      name: item,
      quantity: qty
    });
  }

  function cart_total() {
    console.log(cart)
    cart.forEach(item => {
      beverages.forEach(beverage => {
        if (beverage.name === item.name) {
          sum += beverage.price * item.quantity
        }
      })
    });
    console.log(sum)
  }

我想遍历我的数组并计算我的值-JavaScript

I want to loop through my array and calculate my values-JavaScript

javascript

arrays

json

loops

cart