Почему некорректно отображаются иконки погоды?

Question

[tery-lida]

Здравствуйте. Подскажите пожалуйста насчет такого вопроса.
разрабатываю приложение погоды. Я использую вот эти иконки погоды
Приложение должно запускаться и сразу показывать погоду и иконку погоды текущего расположение пользователя. С этим пунктом вопросов нет.
Использую вот этот код

function coords(lat, long) { 
fetch(`url`) 
.then((response) => response.json()) 
.then((data) => {
const icon = document.createElement('i');
icon.className = icons(data.weather[0].icon);
icon.style.fontSize = '120px';
document.getElementById('icon').appendChild(icon);)}

Дальше мне надо отобразить погоду в городе, который вводится через поле поиска. И вот тут сама иконка не работает. Если использовать данный код, то к существующей иконке погоды добавляется новая.


Пробовал через InnerHtml - отображается числовой код иконки и все


Подскажите, что я делаю не так ?

Answer 1

[Виталий Першин]

Если я правильно понял, перед
document.getElementById('icon').appendChild(icon);
Просто очищайте icon
document.getElementById('icon').innerHTML = "";
Что-то вроде этого:

function coords(lat, long) { 
fetch(`url`) 
.then((response) => response.json()) 
.then((data) => {
const icon = document.createElement('i');
icon.className = icons(data.weather[0].icon);
icon.style.fontSize = '120px';
document.getElementById('icon').innerHTML = "";
document.getElementById('icon').appendChild(icon);)}

Answer 2

[Шохрух Шаймардонов]

Ну вы посмотрите как вы вообще вставляете. Вы используете elem.appendChild(icon)
А в свою очередь аппенд - вставка, т.е. ему без разницы что у родителя было до него, он просто вставит, а не заменит содержимое.
Проще всего сделать костыль, чтобы не морочиться:
Вставьте перед последней строчкой:
document.getElementById('icon').innerHTML = ''