Заполнение формы html img tags 'src' на основе информации, полученной из кода JavaScript API ⇐ Html

[Anonymous]

Итак, я пытаюсь добавить элемент img из openweatherAPI, который показывает значок относительно того, что находится в результатах JSON, когда пользователь получает текущую веб-статистику, вводя город (т. е. изображение разбросанных облаков, ясное небо и др.). Насколько я понимаю, чтобы отобразить img, мне нужно вставить URL-адрес в раздел «src» тега img. URL-адрес будет выглядеть примерно так:

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

 const png = "http://openweathermap.org/img/wn/" + icon + "@2x.png"

однако, чтобы сделать это динамичным, теги img «src» должны меняться в зависимости от того, какой файл изображения отличается от введенного в городе.
У меня есть логика, определенная с помощью переменных «icon» и «png» в файле js. Мой вопрос: как мне заставить html img 'src' заполниться результатами моей переменной "png" в зависимости от города, который пользователь вводит на странице?
У меня есть ниже включены коды HTML и Javasript.

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

const button = document.querySelector(".button")
const inputValue = document.querySelector(".inputValue")
const name = document.querySelector(".name")
const desc = document.querySelector(".desc")
const temp = document.querySelector(".temp")
const img = document.querySelector(".image")

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

fetch('http://api.openweathermap.org/data/2.5/weather?q='+ inputValue.value +'&units=imperial&appid=61dcc0033e94c4172d2bb94bb607fc5d')
.then(response => response.json())
.then(data => {
const nameValue = data['name']
const tempValue = data['main']['temp']
const descValue = data['weather'][0]['description']
const icon = weatherData.weather[0].icon
const png = "http://openweathermap.org/img/wn/" + icon + "@2x.png"

name.innerHTML = nameValue
temp.innerHTML = tempValue
desc.innerHTML = descValue
img.innerHTML =
})

.catch(err => alert("Wrong City name!"))
})

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

OpenWeatherAPI












[img]main.js[/img]

Подробнее здесь: https://stackoverflow.com/questions/625 ... rom-api-ja