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)
}