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

如何解决我想遍历我的数组并计算我的值-JavaScript

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

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,{
    name: 'cappuccino',price: 3.45,{
    name: 'coffee',price: 1.75,{
    name: 'biscotti',{
    name: 'scone',//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)
        }
    }
   

解决方法

与其写太多和循环......看这个，它可能会帮助你构建你想要的东西

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