0

Estoy consumiendo una api para el tiempo, el problema que tengo esque al detectar que Provincia escogen con addEventListener, no consigo pasar esa variable a otra funcion que tengo, ya que no llega. He probado con funciones globales y no soy capaz.

Aqui esta el problema


    listadoHtml.addEventListener('change',function(){
            window.provinciaSeleccionada = this.options[listadoHtml.selectedIndex].value;
        })
     console.log(window.provinciaSeleccionada)

Detecto que elemento escogen de un listado de opciones con las provincias, pero luego al setearlo en una variable y pasarlo fuera me llega que esa variable no esta definida. He probado con window al ser una variable global pero nada.

my html

<form>
        <select name="listado" id="listado" size="30" style="width: 300px;">
    </select>
</form>

codigo javascript

fetch('https://www.el-tiempo.net/api/json/v2/provincias')
    .then(response => response.json())
    .then(data => respuestaApiConDatos(data));

function respuestaApiConDatos(provincias) {

    const TodasLasProvincias = provincias.provincias
    const listadoHtml = document.getElementById("listado");

    const recorreArrayDeProvincias = (arr) => {
        for(let i=0; i<=arr.length-1; i++){
            let nombreProvincia = arr[i]['NOMBRE_PROVINCIA']
            let idProvincia = arr[i]['CODPROV']
            let option = document.createElement("option");
            option.text = nombreProvincia;
            option.value = idProvincia;
            listadoHtml.add(option);
        }
    }
    recorreArrayDeProvincias(TodasLasProvincias)

    listadoHtml.addEventListener('change',function(){
            window.provinciaSeleccionada = this.options[listadoHtml.selectedIndex].value;
        })
     console.log(window.provinciaSeleccionada)

}

1 respuesta 1

0

Lo único malo del código es el lugar donde se intenta leer la variable provinciaSeleccionada. Si se lee dentro del callback del evento ahí si tiene su valor configurado.

También es buena idea extraer el código del listener fuera de la función respuestaApiConDatos para dejarla más limpia.

fetch('https://www.el-tiempo.net/api/json/v2/provincias')
    .then(response => response.json())
    .then(data => respuestaApiConDatos(data));

function respuestaApiConDatos(provincias) {
    const TodasLasProvincias = provincias.provincias
    const recorreArrayDeProvincias = (arr) => {
        for (let i = 0; i <= arr.length - 1; i++) {
            let nombreProvincia = arr[i]['NOMBRE_PROVINCIA']
            let idProvincia = arr[i]['CODPROV']
            let option = document.createElement("option");
            option.text = nombreProvincia;
            option.value = idProvincia;
            document.getElementById("listado").add(option);
        }
    }
    recorreArrayDeProvincias(TodasLasProvincias)
}

document.getElementById("listado").addEventListener('change', function () {
    window.provinciaSeleccionada = this.options[this.selectedIndex].value;
    console.log(window.provinciaSeleccionada)
})
<form>
        <select name="listado" id="listado" size="30" style="width: 300px;">
    </select>
</form>

Tu Respuesta

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

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