Adding Items to an Empty Array with Javascript

Question

I'm just learning Javascript and need to build a cart. I am using a drop-down menu to select the items which are stored in another array. I then want to push the selected item to an empty array called "cart"

This is the code I'm using to select the data from the catalog array inorder to push it to the cart array:

let addFCat = document.getElementById('addfromCat');

function cat_Cart(){ 

  // find out the index of the item loaded
  let e = document.getElementById("productList");
  let itemIndex = e.options[e.selectedIndex].value;
  console.log(itemIndex);

  // update item to cart
  cart.push(catalog[itemIndex]);
  localStorage.setItem("cart", JSON.stringify(cart));

  // alert with updated total
  // alert(`You added ${cartItems.name} to your Cart`)

}

But for some reason my cart[] remains empty.

If I manually type: cart.push(catalog[ enter index here ]) in the console, and then: cart.length; the cart updates. What am I doing wrong, that it won't update my cart within the function?

(PS. I'm using the console.logs to check the code is running)

Answer 1

I think it is because you do refresh your browser, and it causes your cart[] to be empty, I suggest you to store the cart array in empty condition, to localStorage first, and get the updated value like this

 const cart = [] localStorage.setItem("cart", JSON.stringify(cart)); function cat_Cart(){ const getCart = JSON.parse(localStorage.getItem("cart")); // find out the index of the item loaded let e = document.getElementById("productList"); let itemIndex = e.options[e.selectedIndex].value; console.log(itemIndex); // update item to cart getCart.push(catalog[itemIndex]); localStorage.setItem("cart", JSON.stringify(getCart)); // alert with updated total // alert(`You added ${cartItems.name} to your Cart`) }

local storage will help you to save any data, and it will not to be deleted even though you refresh the browser. thank you