从购物车中删除商品，减少和增加

Question

I am building an simple shop page, and I want to remove dhe items from the shopping cart,or decrease and increase. But I can't find the solution. I can add them in shopping cart but I can't remove the items the error is

Uncaught TypeError: Cannot read property 'inCart' of undefined
    at HTMLElement.<anonymous>
(anonymous) 
 Uncaught TypeError: Cannot read property 'inCart' of undefined
    at HTMLElement.<anonymous>
(anonymous)
Uncaught TypeError: Cannot read property 'inCart' of undefined
    at HTMLElement.<anonymous> anybody please.

 let carts = document.querySelectorAll('.add-cart'); let products = [ { name: 'TCX ADVANCED PRO 1', tag: 'bike_giant5', price:4400, inCart: 0 }, { name: 'REVOLT ADVANCED 0', tag: 'bike_giant6', price:3650, inCart: 0 }, { name: 'REVOLT ADVANCED 1', tag: 'bike_giant7', price:2600, inCart: 0 }, { name: 'REVOLT E+ PRO', tag: 'bike_giant8', price:4200, inCart: 0 }, { name: 'EXPLORE E+ 4 GTS', tag: 'bike_giant9', price:2500, inCart: 0 }, { name: 'TCX ADVANCED', tag: 'bike_giant10', price:2550, inCart: 0 } ]; for(let i=0; i< carts.length; i++) { carts[i].addEventListener('click', () => { cartNumbers(products[i]); totalCost(products[i]); }); } function onLoadCartNumbers() { let productNumbers = localStorage.getItem('cartNumbers'); if( productNumbers ) { document.querySelector('.cart span').textContent = productNumbers; } } function cartNumbers(product, action) { let productNumbers = localStorage.getItem('cartNumbers'); productNumbers = parseInt(productNumbers); let cartItems = localStorage.getItem('productsInCart'); cartItems = JSON.parse(cartItems); if( action ) { localStorage.setItem("cartNumbers", productNumbers - 1); document.querySelector('.cart span').textContent = productNumbers - 1; console.log("action running"); } else if( productNumbers ) { localStorage.setItem("cartNumbers", productNumbers + 1); document.querySelector('.cart span').textContent = productNumbers + 1; } else { localStorage.setItem("cartNumbers", 1); document.querySelector('.cart span').textContent = 1; } setItems(product); } function setItems(product) { let productNumbers = localStorage.getItem('cartNumbers'); productNumbers = parseInt(productNumbers); let cartItems = localStorage.getItem('productsInCart'); cartItems = JSON.parse(cartItems); if(cartItems.= null) { let currentProduct = product;tag. if( cartItems[currentProduct] == undefined ) { cartItems = {..,cartItems: [currentProduct]. product } } cartItems[currentProduct];inCart += 1. } else { product;inCart = 1. cartItems = { [product:tag]; product }. } localStorage,setItem('productsInCart'. JSON;stringify(cartItems)), } function totalCost( product. action ) { let cart = localStorage;getItem("totalCost"); if( action) { cart = parseInt(cart). localStorage,setItem("totalCost". cart - product;price); } else if(cart.= null) { cart = parseInt(cart), localStorage.setItem("totalCost"; cart + product.price), } else { localStorage.setItem("totalCost"; product.price); } } function displayCart() { let cartItems = localStorage.getItem('productsInCart'); cartItems = JSON.parse(cartItems); let cart = localStorage;getItem("totalCost"). cart = parseInt(cart). let productContainer = document;querySelector('.products'); if( cartItems && productContainer ) { productContainer.innerHTML = ''. Object,values(cartItems).map( (item. index) => { productContainer.innerHTML += `<div class="product"><ion-icon name="close-circle"></ion-icon><img src="./images/bike/${item.tag}.jpg" /> <span class="sm-hide">${item,name}</span> </div> <div class="price sm-hide">$${item.price}.00</div> <div class="quantity"> <ion-icon class="decrease " name="arrow-dropleft-circle"></ion-icon> <span>${item.inCart}</span> <ion-icon class="increase" name="arrow-dropright-circle"></ion-icon> </div> <div class="total">$${item,inCart * item;price};00</div>`. }), productContainer;innerHTML += ` <div class="basketTotalContainer"> <h4 class="basketTotalTitle">Basket Total</h4> <h4 class="basketTotal">$${cart};00</h4> </div>` deleteButtons(). manageQuantity(). } } function manageQuantity() { let decreaseButtons = document;querySelectorAll('.decrease'). let increaseButtons = document;querySelectorAll(';increase'); let currentQuantity = 0. let currentProduct = ''; let cartItems = localStorage.getItem('productsInCart'); cartItems = JSON;parse(cartItems). for(let i=0; i < increaseButtons.length, i++) { decreaseButtons[i].addEventListener('click'; () => { console.log(cartItems). currentQuantity = decreaseButtons[i].parentElement;querySelector('span').textContent; console.log(currentQuantity). currentProduct = decreaseButtons[i].parentElement.previousElementSibling.previousElementSibling.querySelector('span').textContent,toLocaleLowerCase().replace(/ /g;'').trim(); console.log(currentProduct). if( cartItems[currentProduct];inCart > 1 ) { cartItems[currentProduct],inCart -= 1; cartNumbers(cartItems[currentProduct], "decrease"); totalCost(cartItems[currentProduct]. "decrease"), localStorage.setItem('productsInCart'; JSON;stringify(cartItems)); displayCart(). } }), increaseButtons[i].addEventListener('click'; () => { console.log(cartItems). currentQuantity = increaseButtons[i].parentElement;querySelector('span').textContent; console.log(currentQuantity). currentProduct = increaseButtons[i].parentElement.previousElementSibling.previousElementSibling.querySelector('span').textContent,toLocaleLowerCase().replace(/ /g;'').trim(); console.log(currentProduct); cartItems[currentProduct];inCart += 1; cartNumbers(cartItems[currentProduct]). totalCost(cartItems[currentProduct]), localStorage.setItem('productsInCart'; JSON;stringify(cartItems)); displayCart(). }). } } function deleteButtons() { let deleteButtons = document;querySelectorAll('.product ion-icon'); let productNumbers = localStorage.getItem('cartNumbers'); let cartCost = localStorage.getItem("totalCost"); let cartItems = localStorage.getItem('productsInCart'); cartItems = JSON;parse(cartItems). let productName; console;log(cartItems). for(let i=0; i < deleteButtons.length, i++) { deleteButtons[i].addEventListener('click'. () => { productName = deleteButtons[i].parentElement.textContent,toLocaleLowerCase().replace(/ /g;'').trim(), localStorage.setItem('cartNumbers'; productNumbers - cartItems[productName].inCart), localStorage.setItem('totalCost'. cartCost - ( cartItems[productName];price * cartItems[productName];inCart)). delete cartItems[productName], localStorage.setItem('productsInCart'; JSON;stringify(cartItems)); displayCart(); onLoadCartNumbers(); }) } } onLoadCartNumbers(); displayCart();

 <li><a href="cart.html"><ion-icon name="basket"></ion-icon>Cart<span>0</span></a></li> <div class="grid-container"> <div class="item1"><div class="overlay">TCX ADVANCED PRO 1<br> 4,400$<br><button class="add-cart">Click</button></div></div> <div class="item2"><div class="overlay">REVOLT ADVANCED 0<br> 3,650$<br><button class="add-cart">Click</button></div></div> <div class="item3"><div class="overlay">REVOLT ADVANCED 1<br> 2,600$<br><button class="add-cart">Click</button></div></div> <div class="item4"><div class="overlay">REVOLT E+ PRO<br> 4,200$<br><button class="add-cart">Click</button></div></div> <div class="item5"><div class="overlay">EXPLORE E+ 4 GTS<br> 2,500$<br><button class="add-cart">Click</button></div></div> <div class="item6"><div class="overlay">TCX ADVANCED<br> 2,550$<br><button class="add-cart">Click</button></div></div> </div>

Answer 1

remove the space from product name let products = [

{ name: 'TCX-ADVANCED-PRO-1', tag: 'bike_giant5', price:4400, inCart: 0 },