No puedo hacer que mis iconos cambien, sé que lo que he hecho es un desastre, por favor que alguien me ayude. Subí mis íconos en cloudinary, porque esa es la única forma que conozco de acceder a las imágenes en stackblitz
fetch(api) .then(response => { return response.json(); }) .then(data => { console.log(data.weather[0].icon) const {temp} = data.main; const {description} = data.weather[0]; const {icon} = data.weather[0]; temperatureDescription.textContent = description; temperatureDegree.textContent = Math.floor(temp - 273.15); locationTimezone.textContent = data.name; locationIcon = icon; }) .then(function(){ displayWeather(); locationIcon.innerHTML = `<img src="https://res.cloudinary.com/dybrtotf1/image/upload/v1634954533/icons/${icon}.png">`; }); })(); Olvidó devolver el icon del segundo then obviamente no then los datos devueltos del segundo al tercero then usarlos.
devuelva el icon o todos sus datos del segundo then utilícelo en el third :
fetch(api) .then(response => { return response.json(); }) .then(data => { console.log(data.weather[0].icon) const {temp} = data.main; const {description} = data.weather[0]; const {icon} = data.weather[0]; temperatureDescription.textContent = description; temperatureDegree.textContent = Math.floor(temp - 273.15); locationTimezone.textContent = data.name; return icon // -----> here }) .then(function(icon){ // ----> pass the returned data to the function param to use it in this function displayWeather(); locationIcon.innerHTML = `<img src="https://res.cloudinary.com/dybrtotf1/image/upload/v1634954533/icons/${icon}.png">`; }); })(); Parece que el third cambio es redundante, puede hacer lo mismo con el segundo then en este fragmento de código, eliminé las partes no deseadas:
fetch(api) .then(response => response.json()) .then(data => { const {temp} = data.main; const {icon, description} = data.weather[0]; temperatureDescription.textContent = description; temperatureDegree.textContent = Math.floor(temp - 273.15); locationTimezone.textContent = data.name; locationIcon.innerHTML = `<img src="https://res.cloudinary.com/dybrtotf1/image/upload/v1634954533/icons/${icon}.png">` displayWeather(); }) .catch(error => console.log(error)) })(); Nota: utilice siempre el bloque catch con las acciones asincrónicas para detectar los errores y realizar las acciones adecuadas en caso de falla. aquí acabo de registrar el mensaje de error, puede personalizar esta sección agregando la funcionalidad deseada.