0
287
ViewsJavascript : for loop doesn't work with array.length
I want to do a for loop, in which var i, will increase by 1 for each element in my array. But, i doesn't increase, it log me "0" even if my array have something in it. I've logged array.length just to check if it works in the for loop, and it does.
So, I don't know what the problem is. I've tried many things, many ways to define my array just to make "for" loop works.
This is the code :
let button = document.getElementById("addToCartButton");
console.log(button);
button.onclick = function(event) {
console.log("kuku le bouton");
let amountInput = document.getElementById("quantity");
let select = document.getElementById("colors");
let productFinalDetails = Object.assign({}, productDetails, {
color: `${select.value}`,
quantity: amountInput.value,
});
let productArray = JSON.parse(localStorage.getItem("product"));
console.log(productArray);
if (productArray == null ) {
productArray = [];
productArray.push(productFinalDetails);
localStorage.setItem("product", JSON.stringify(productArray));
productArray = JSON.parse(localStorage.getItem("product"));
console.log(productArray.length);
} else if (productArray != null) {
for (var i = 0; i < productArray.length; i++) {
console.log(i);
console.log(productArray.length);
}
}
};
And here are google console screens !
·
Juan Pablo Isaza
1 answers
Answer question0
You do not need i in your code
You do too many things on click
You likely meant to do this
let productData = localStorage.getItem("product");
let productArray = productData ? JSON.parse(productData) : [];
let button = document.getElementById("addToCartButton");
button.addEventListener("click", function(event) {
console.log("kuku le bouton");
let amountInput = document.getElementById("quantity");
let select = document.getElementById("colors");
let productFinalDetails = {
color: select.value,
quantity: amountInput.value
};
productArray.push(productFinalDetails);
localStorage.setItem("product", JSON.stringify(productArray));
});
If you have more than one button, you need to change ID to class and delegate from the container
let productData = localStorage.getItem("product");
let productArray = productData ? JSON.parse(productData) : [];
document.getElementById("cartContainer").addEventListener("click", function(e) {
const tgt = e.target;
if (!tgt.matches("button")) return;
console.log("kuku le bouton");
const itemDiv = tgt.closest("div");
let amount = itemDiv.querySelector(".quantity").value;
let color = itemDiv.querySelector(".colors").value
let productFinalDetails = {
color: color,
quantity: amount
};
productArray.push(productFinalDetails);
localStorage.setItem("product", JSON.stringify(productArray));
});
·
Juan Pablo Isaza
Report
Answer question