0

ayuda, tengo un problema, y creo que se trata de sobreescritura de una variable, los pongo en contexto

tengo una funcion que pide datos a php, cuando carga estos datos me lanza un select , y yo puedo obtener el valor de ese select, pero el problea es: el select es dinamico, ya que la funcion se va a llamar varias vesces (con un for)

entonces, cuando quiero obtener el 'value' del select, solo me esta tomando el valor del ultimo select

aqui dejo la funcion en js

const mostrarProductos = (contador, id_proveedor) => {

            // muestra un loadre en la pantalla
            loader();

            // funcion para pedir los datos a php, esta funcion es asincrona
            pedirDatosProducto(id_proveedor)
                .then(data => {

                    // si no se encontraron datos
                    if (data.length <= 0) return;

                    // Mostrar el <select> de los productos en el formulario con un id unico para cada select
                    contenedorDetallesProductos.innerHTML += `
                        <hr />

                        <!-- DESCRIPCION -->
                        <div class="flex flex-col gap-2 mt-10">

                            <label for="descripcion${contador}">Descripción</label>

                            <select name="descripcion${contador}" id="descripcion${contador}" class="p-2">
                                <option value="" selected>Seleccionar</option>
                                ${data.map(e => {
                                    return (`<option value="${e.id_producto}">${e.nombre_producto}</option>`)
                                })}
                            </select>

                        </div>

                        
                        <!-- aqui va unos imputs (esto aparecera cuando el input 'descripcion' cambie) -->
                        <div class="w-full grid grid-cols-2 gap-x-3 gap-y-5 " id="contendorDatosProducto"></div>
                    `;

                    // Obtener referencia al select actual
                    let descripcionSelect = document.getElementById(`descripcion${contador}`);


                    // TODO: aqui esta el error, yo pienso que se esta sobreescribiendo la variable  (descripcionSelect) y por eso solo me funciona el select que se ve en la pantalla
                    // Cada vez que el <select> del producto cambie
                    descripcionSelect.addEventListener('change', function(e) {
                        let id_producto = e.target.value;
                        console.log(id_producto);
                    });

                })
                .finally(() => {

                    // cerramos el loader
                    cerrarLoader();
                });
        };

parece mucho, pero en realidad se ve grande por el html que lleva dentro

ahora, en la parte de

let descripcionSelect = document.getElementById(`descripcion${contador}`);

yo siento que se esta sobreescribiendo y por eso solo me toma el valor del ultimo select

no se si hay alguna forma de resolver este problema, adjunto foto de lo que estoy haciendo:

introducir la descripción de la imagen aquí

1 respuesta 1

0

lo arregleeeeeeee! lo que hice fue que a cada select le agrege su propio onchange="generarDatosSelect(event)"

asi quedo la el codigo


// funcion para mostrar <select> (esta funcion se repetira varias veces, depende de las veces que se llame (se la llamara dentro de un for ))
        const mostrarProductos = (contador, id_proveedor) => {

            // muestra un loadre en la pantalla
            loader();

            // funcion para pedir los datos a php, esta funcion es asincrona
            pedirDatosProducto(id_proveedor)
                .then(data => {

                    // si no se encontraron datos
                    if (data.length <= 0) return;

                    // Mostrar el <select> de los productos en el formulario con un id unico para cada select
                    contenedorDetallesProductos.innerHTML += `
                        <hr />

                        <!-- DESCRIPCION -->
                        <div class="flex flex-col gap-2 mt-10">

                            <label for="descripcion${contador}">Descripción</label>

                            <select onchange="generarDatosSelect(event)" name="descripcion${contador}" id="descripcion${contador}" class="p-2">
                                <option value="" selected>Seleccionar</option>
                                ${data.map(e => {
                                    return (`<option value="${e.id_producto}">${e.nombre_producto}</option>`)
                                })}
                            </select>

                        </div>

                        
                        <!-- aqui va unos imputs (esto aparecera cuando el input 'descripcion' cambie) -->
                        <div class="w-full grid grid-cols-2 gap-x-3 gap-y-5 " id="contendorDatosProducto"></div>
                    `;

                    

                })
                .finally(() => {

                    // cerramos el loader
                    cerrarLoader();
                });
        };

        const generarDatosSelect = (e) => {
            

            console.log(e.target.value);
        }

elimine la parde donde le agregava un evento change y lo puse como fuincion aparte, que alegriaaaa

4
  • Poner funciones in-line al estilo <select onchange="generarDatosSelect(event)" name="descripcion${contador}" id="descripcion${contador}" class="p-2"> es una mala práctica, porque hace depender demasiado el contenido HTML del código Javascript. Imagina una App donde tienes miles de archivos donde pusiste in-line una llamada a generarDatosSelect(event) y el código evoluciona, y la función necesita recibir un segundo parámetro aparte de event. Te quiero ver, identificando en tu App los mil y pico de archivos donde pusiste esa función in-line...
    – A. Cedano
    Commented el 4 feb. a las 19:56
  • La práctica recomendada para este caso sería marcar el elemento con una clase, de hecho, ya hay una que es p-2, y asignar la escucha de eventos usando querySelectorAll() en esa clase. Así, todos los elementos que tengan la clase p-2 estarán ligados a esa escucha de eventos. Si mañana la función generarDatosSelect() debe cambiar, simplemente cambias el código de la función, sin tener que preocuparte de adivinar en los mil y pico de archivos donde la llamaste in-line, para luego modificar a mano los parámetros.
    – A. Cedano
    Commented el 4 feb. a las 20:00
  • @A.Cedano Es lo mismo si fueses a cambiar una clase CSS. Si tu tienes un componente repetido mil veces y cada vez que tienes que modificarlo debes cambiarlos en 1000 lugares, es que estas haciéndolo mal. La mayoría de los frameworks modernos usan declaraciones inline si tener el problema que tu describes.
    – Yussef
    Commented el 4 feb. a las 21:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.