'Javascript issue- Uncaught TypeError: Cannot read property 'incart' of undefined
I am trying to increase or decrease quantity but for some reason the increase , decrease and remove products buttons are not working. whenever I click on the icons I am seeing a error "Uncaught TypeError: Cannot read property 'inCart' of undefined in console.log. I have spend a lot of time but did not find the error. let carts = document.querySelectorAll('.add-cart');
let products = [
{
name:'Natural Straight',
tag: 'naturalStraight',
price: 95,
incart:0
},
{
name:'Natural Wavy',
tag: 'naturalWavy',
price: 200,
incart:0
},
{
name:'Clip in Bangs',
tag: 'Bangs',
price: 50,
incart:0
},
{
name:'Bronde Balayage',
tag: 'brondeBalayage',
price: 350,
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)
{
let productNumbers = localStorage.getItem('cartNumbers');
productNumbers = parseInt(productNumbers);
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;
}
setIteams(product);
}
function setIteams(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){
// console.log("te product price is", product.price);
let cartCost = localStorage.getItem('totalCost');
console.log("My cartCost is", cartCost);
console.log(typeof cartCost);
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="product">
<ion-icon name="close-circle-outline"></ion-icon>
<img src="./images/${item.tag}.jpg">
<span>${item.name}</span>
<div class="price">$${item.price},00</div>
<div class="quantity">
<ion-icon class="decrease" name="caret-back-circle-outline"></ion-
icon>
<span>${item.incart}</span>
<ion-icon class="increase" name="caret-forward-circle-outline"></ion-icon>
</div>
<div class="total">$${item.incart * item.price},00 </div>
</div>
`;
});
}
manageQuantity();
}
function manageQuantity() {
let decreaseButton = document.querySelectorAll('.decrease');
let increaseButton = document.querySelectorAll('.increase');
let cartItems = localStorage.getItem('productsInCart') //Grab all the
cartItems from localstorage
let currentQuantity = 0;
is 0 when we get started
let currentProduct = " ";
cartItems = JSON.parse(cartItems);
console.log(cartItems);
// whenever we click on them the addEventListner does some action
for (let i=0; i < decreaseButton.length; i++) {
decreaseButton[i].addEventListener('click', () => {
// whenever I click on decrease button I want to know the current
quantity
currentQuantity =
decreaseButton[i].parentElement.querySelector('span').textContent;
console.log(currentQuantity);
//replace(//g,'') -to remove place between words,g is for globally
everywhere on textcontent.
currentProduct =
decreaseButton[i].parentElement.previousElementSibling
.previousElementSibling.textContent.toLowerCase().replace(/ /g,
'');
console.log(currentProduct);
//checking cartItems and selecting the one with name and accessing
incart from cartItems.
cartItems[currentProduct].incart = cartItems[currentProduct].incart -1;
});
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
