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

Question

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

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