I have created a shopping cart in Javascript.
But when I remove any items from my cart, the total remains the same.
Here is my code:
let carts=document.querySelectorAll(".btn-primary");
let products=[ {
name: 'pizza', price:10, tag: 'ppizza', inCart:0
}
,
{
name: 'pitza', price:15, tag: 'mpizza', inCart:0
}
];
for (let i=0;
i< carts.length;
i++) {
carts[i].addEventListener('click', ()=> {
cartNumbers(products[i]);
totalCost(products[i]);
}
)
}
function cartLoad() {
let productNumbers=localStorage.getItem('cartNumbers');
if (productNumbers) {
document.querySelector('.fa-shopping-cart').textContent=productNumbers;
}
}
function cartNumbers(product) {
let productNumbers=localStorage.getItem('cartNumbers');
productNumbers=parseInt(productNumbers);
if (productNumbers) {
localStorage.setItem('cartNumbers', productNumbers + 1);
document.querySelector('.fa-shopping-cart').textContent=productNumbers+1;
}
else {
localStorage.setItem('cartNumbers', 1);
document.querySelector('.fa-shopping-cart').textContent=1;
}
setItems(product);
}
function setItems(product) {
let cartItems=localStorage.getItem('productsIncart');
cartItems=JSON.parse(cartItems);
if(cartItems !=null) {
if(cartItems[product.tag]==undefined) {
cartItems= {
...cartItems,
[product.tag]: product
}
}
cartItems[product.tag].inCart+=1;
}
else {
product.inCart=1;
cartItems= {
[product.tag]: product
}
}
localStorage.setItem('productsIncart', JSON.stringify (cartItems));
}
function totalCost(product) {
let cartCost=localStorage.getItem('totalCost');
if (cartCost !=null) {
cartCost=parseInt(cartCost);
localStorage.setItem("totalCost", cartCost + product.price);
}
else {
localStorage.setItem("totalCost", product.price);
}
}
function displayCart() {
let cartItems=localStorage.getItem("productsIncart");
cartItems=JSON.parse(cartItems);
let productContainer=document.querySelector (".products") let cartCost=localStorage.getItem('totalCost');
if(cartItems && productContainer) {
productContainer.innerHTML='';
Object.values(cartItems).map(item=> {
productContainer.innerHTML +=` <div class=""container">
<div class="row"> <div class="col-sm"> <button type="button" class="dark" >Remove </button> $ {
item.name
}
</div> <div class="col-sm"> $ {
item.price
}
</div> <div class="col-sm"> <button style='font-size:10px;color:red'>decrease <i class='fas fa-angle-left'></i></button> $ {
item.inCart
}
<button style='font-size:10px;color:blue'>increase <i class='fas fa-angle-right'></i></button> </div> <div class="col-sm"> $ {
item.price * item.inCart
}
</div> </div> </div> `;
}
);
productContainer.innerHTML+=` <div class="container"><div class="col-6 col-md-4"><div class="col"><h4>Grand Total </h4><div class="p-3 border bg-light">$ {
cartCost
}
</div></div></div></div>`
}
}
displayCart();
cartLoad();
let button=document.getElementsByClassName('dark');
for (let i=0;
i < button.length;
i++) {
button[i].addEventListener('click', function(event) {
let clicked=event.target clicked.parentElement.parentElement.remove() remove();
}
)
}
function remove() {
let itemRemove=localStorage.getItem("cartNumbers");
itemRemove=parseInt(itemRemove);
if(itemRemove) {
localStorage.setItem("cartNumbers", itemRemove -1) document.querySelector('.fa-shopping-cart').textContent=itemRemove - 1;
}
else {
localStorage.setItem("cartNumbers", 1);
document.querySelector('.fa-shopping-cart').textContent=1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Food Shop</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-dark bg-dark">
<div class="container">
<a href="cart.html"><i class="fa fa-shopping-cart" style="color:red" > </i></a>
<a class="navbar-brand" href="#">Pizza shop</a>
</div>
</nav>
<div class="cart-items"></div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="images/p.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Blossum pizza</h5>
<p class="card-text">$10</p>
<a href="#" class="btn btn-primary">add to cart </a>
</div>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="images/m.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Blossum pizza</h5>
<p class="card-text">$15</p>
<a href="#" class="btn btn-primary">add to cart</a>
</div>
</div>
</div>
<script src="e.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
question from:
https://stackoverflow.com/questions/65949947/when-i-remove-items-from-my-cart-grand-total-is-not-updating 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
