Как я могу изменить источник изображения на основе текстового содержимого? ⇐ Html

[Anonymous]

Я создаю приложение о погоде и хочу иметь изображение, основанное на погоде. Когда я попытался это сделать, изображение осталось пустым.
Вот мой код:
JS:

Код: Выделить всё

let button = document.querySelector('.button')
let inputLocation = document.querySelector('.location')
let temp = document.querySelector('.temp');
let desc = document.querySelector('.desc');
let image = document.getElementById("image");

button.addEventListener('click', function(){

fetch(`https://api.openweathermap.org/data/2.5/weather?q=${inputLocation.value}&units=metric&appid=9f5cf42409938f351c3a005bbc01773f`)
.then(response => response.json())
.then(
displayData)
.catch(err => alert('Not a city name.'));

},

function changeImg() {
image.src = "images/" + desc.textContent + ".svg";
console.log(image.src);

})

const displayData=(weather)=>{
temp.innerText=`${weather.main.temp.toFixed(0)}°C`
desc.innerText=`${weather.weather[0].main}`

}

HTML:

Код: Выделить всё

Weather App







[i]
[/i]



˚C

Я попытался изменить текст погоды на нижний регистр, а затем указать это в качестве источника изображения:

Код: Выделить всё

image.src = "images/" + desc.textContent.toLowerCase() + ".svg";

Но это тоже не сработало. Это также не выдает никаких ошибок.

Подробнее здесь: https://stackoverflow.com/questions/793 ... xt-content