Comunidad, ¡los saludo! agradezco de antemano su ayuda...
No estoy pudiendo mantener el valor en una variable global a mi aplicación y no entiendo el por qué...
Creé una variable 'indice' con la cual llevo el ID de mis productos, la misma la puse en un archivo js en donde almaceno todas las variables globales a mi app y la inicializo en un valor 1. Este archivo lo ubico primero en mi lista de scripts en el HTML como adjunto en la imagen.
Cuando llego a la ejecución de mi archivo main.js en donde cargo unos valores iniciales para mi arreglo de productos (el arreglo de productos lo hago mediante un JSON), voy incrementando para cada producto su id con indice++. Hasta ahí todo bien, me crea mi arreglo de 4 elementos cada uno con su ID de 1 a 4. El problema viene que al momento de agregar un nuevo producto, para lo cual llamo a la función agregarProducto() ubicada en el archivo manejadorProd.js con un listener desde el main.js no me toma el valor 4 del 'indice' que fue modificado desde el main.js sino que me toma el valor 1 declarado en globales.js.
Cabe destacar que hago todos los incrementos de la variable indice desde el main con indice++ y luego desde la función agregarProducto hago lo mismo.. al hacer el push sobre el arreglo paso como parámetro de id un indice++ y entiendo que ese indice al cual le aplico el ++ ya debería venir con el valor 4 desde el main. Pero al hacer un console.log(indice) al principio de la función agregarProducto() me aparece como valor 1, que es el original de globales.js
¿Cómo puedo hacer para que la función agregarProducto me tome el valor de indice que viene desde el main.js o en su defecto que la función main.js me actualice el valor indice que se encuentra en el archivo globales.js ?
let indice = 1;
//Recorre el arreglo de productos creando filas en una tabla HTML con los datos correspondientes
function mostrarProductos() {
let tabla = document.getElementById('tabla-productos');
let listaTemp = JSON.parse(localStorage.getItem('listadoProductos'));
for(let p = 0; p < listaTemp.length; p++) {
let fila = document.createElement('tr'); //Creo una nueva fila a la tabla
fila.innerHTML = `
<td>${listaTemp[p].id}</td>
<td>${listaTemp[p].nombre}</td>
<td>${listaTemp[p].presentacion}</td>
<td>$ ${listaTemp[p].precio}</td>
<td><a href="#" name="delProducto">Eliminar</a></td>
`;
tabla.appendChild(fila); //Agrego la información de un producto en la fila de la tabla
}
}
function eliminarProducto(elemento){
if (elemento.name === 'delProducto') {
elemento.parentElement.parentElement.remove();
};
}
function agregarProducto(){
//Captura de datos de HTML y creación de nuevo objeto Producto
const nombre = document.getElementById('nombreProducto').value;
const presentacion = document.getElementById('presentacionProducto').value;
const producto = document.getElementById('precioProducto').value;
const nuevoProducto = new Producto(indice++, nombre, presentacion, producto);
//Operaciones JSON sobre el arreglo de Productos
arregloProductos = JSON.parse(localStorage.getItem('listadoProductos'));
arregloProductos.push(nuevoProducto);
localStorage.setItem('listadoProductos', JSON.stringify(arregloProductos));
//Reset de elementos de la página
document.getElementById('tabla-productos').reset();
document.getElementById('formulario-nuevo').reset();
//Listado de Productos con el nuevo producto cargado
mostrarProductos();
};