Currently in the process of learning Javascript and working on creating a cart feature. Utilizing a drop-down menu to choose items from an array, I intend to then add the selected item to an empty array named "cart".
Below is the code snippet responsible for selecting data from the catalog array to push it into the cart array:
let addFCat = document.getElementById('addfromCat');
function cat_Cart(){
// Determine the index of the loaded item
let e = document.getElementById("productList");
let itemIndex = e.options[e.selectedIndex].value;
console.log(itemIndex);
// Add item to cart
cart.push(catalog[itemIndex]);
localStorage.setItem("cart", JSON.stringify(cart));
// Display update alert
// alert(`You added ${cartItems.name} to your Cart`)
}
However, despite implementing the function, my cart[] array remains empty.
If I manually type: cart.push(catalog[enter index here]) in the console, as well as: cart.length; the cart updates accordingly. What could be causing my cart not to update within the function?
(PS. Using console.logs to verify the implementation of the code)