0

How to change my code, when I push the button again the information is adding to previous, I need that when I push the button the information updates.I select the city, and when I push button :Show me more info, everything is ok,but when I select another (without reloading the page)I need to update the info, not add to previous it's do this:)

    document.querySelector(".city-select").onchange = () => {
        let strUser = document.querySelector(".city-select").value;
        updateInfo(strUser);
        //getWeather()// при селекті

    }
   
   function updateInfo(strUser) {
   fetch(`http://api.openweathermap.org/data/2.5/weather?q=${strUser}&appid=f3ab273b1163fcf008d6d3ce02f9e86e`)
       .then(function (resp) { return resp.json() })
       .then(function (data) {
           console.log(data);
           document.querySelector('.package-name').textContent = data.name;
           document.querySelector('.price').innerHTML = Math.round(data.main.temp - 273) + '°';
           document.querySelector('.disclaimer').textContent = data.weather[0]['description'];
           //https://openweathermap.org/img/wn/02d@2x.png
           document.querySelector('.features li').innerHTML = `<img src="https://openweathermap.org/img/wn/${data.weather[0]['icon']}@2x.png">`;
           document.querySelector('.button-primary').onclick = () => {
               let div = document.createElement('div');
               div.innerHTML = 'Wind speed: ' + data.wind.speed + ' km/h' + '<br>'+'Humidity: '+data.main.humidity + '%' + '<br>'+ 'Pressure: ' + data.main.pressure + 'Pa';
               document.querySelector('.out').appendChild(div);
           }
       })
       .catch(function () {
           // catch any errors
       });
   }
Nadia Medvid
  • 25
  • 4
  • 1
    In the `onclick` function, check to see if there's already a div; if so, update the `innerHTML` if not, create and append a new one. – Heretic Monkey Jan 28 '21 at 21:21

1 Answers1

0

This is because you used appendChild (https://www.w3schools.com/jsref/met_node_appendchild.asp)

Maybe you should try this instead (if there is already an element) : How to replace DOM element in place using Javascript?

Ribodou
  • 61
  • 1
  • 6