Estoy aprendiendo Javascript y necesito construir un carrito. Estoy usando un menú desplegable para seleccionar los elementos que están almacenados en otra matriz. Luego quiero empujar el elemento seleccionado a una matriz vacía llamada "carrito"
Este es el código que estoy usando para seleccionar los datos de la matriz del catálogo para enviarlos a la matriz del carrito:
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`) }Pero por alguna razón mi carrito[] permanece vacío.
Si escribo manualmente: cart.push(catalog[ enter index here ]) en la consola, y luego: cart.length; el carrito se actualiza. ¿Qué estoy haciendo mal, que no actualiza mi carrito dentro de la función?
(PD: estoy usando console.logs para verificar que el código se está ejecutando)
Creo que es porque actualiza su navegador y hace que su carrito [] esté vacío, le sugiero que almacene la matriz del carrito en condiciones vacías, primero en localStorage, y obtenga el valor actualizado como este
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`) }El almacenamiento local lo ayudará a guardar cualquier dato y no se eliminará aunque actualice el navegador. gracias