0
0 Comments

I am writing simple JS app that shows weather. After first query variables like 

searchTerm
or every variable from 
array
are appends to the specific element. But after another query they are not override but added next to the previous one. How can i fix that? Should I use 
innerHTML
or just refresh the page after another API call?

			
const form = document.querySelector('#searchForm');
const currentTemp = document.querySelector('#temp');
const feelingTemp = document.querySelector('#feelingTemp');
const button = document.querySelector('button');
const img = document.createElement('img');
const searchCity = document.querySelector('#searchingCity');
const sky = document.querySelector('#skyStatus');
const bg_image = document.querySelector('.left-container');
const moreInfo = document.querySelector('.right-container');


const getWeather = async () => {

    try{
        const searchTerm = form.elements.query.value
        const res = await axios.get(`https://api.openweathermap.org/data/2.5/weather?q={searchTerm}&units=metric&appid=3861eeae573a8188b76a2d6c0ceccfb9`)          let getTemp = res.data.main.temp,             getFeelsTemp = res.data.main.feels_like,             getTempMin = res.data.main.temp_min,             getTempMax = res.data.main.temp_max,             getPressure = res.data.main.pressure,             getHumidity = res.data.main.humidity;             getSkyIcon = res.data.weather[0].main          searchCity.append(searchTerm)         form.elements.query.value = '';          return [getTemp, getFeelsTemp, getTempMin, getTempMax, getPressure, getHumidity, getSkyIcon]                } catch (e){         return "WEATHER SERVICE IS DOWN :("     } }  const runApp = async () => {          form.addEventListener('submit', async function (e) {         e.preventDefault()          const [resTemp, resFeelsTemp, resTempMin, resTempMax, resPressure, resHumidity, resSkyIcon] = await getWeather()          // Głowny kontener informacyjny         currentTemp.append(`{Math.floor(resTemp)}°C`) 

        if(resSkyIcon === 'Clear'){
            img.src = "./img/sun.png"
            let finalImg = document.querySelector('#skyStatus')
            finalImg.appendChild(img)

            bg_image.style.backgroundImage = "url('img/sunny_bg.jpg')"

        }else if(resSkyIcon  === 'Clouds'){
            img.src = "./img/cloud.png"
            let finalImg = document.querySelector('#skyStatus')
            finalImg.appendChild(img)

            bg_image.style.backgroundImage = "url('img/cloud_bg.jpg')"
        }else{
            img.src = "./img/rain.png"
            let finalImg = document.querySelector('#skyStatus')
            finalImg.appendChild(img)

            bg_image.style.backgroundImage = "url('img/rain_bg.jpg')"
        }


        
        // Right box

        const array = [
            `Feels temp {Math.floor(resFeelsTemp)}°C`,             `Temp min{Math.floor(resTempMin)}°C`,
            `Temp max {Math.floor(resTempMax)}°C`,              `Pressure{resPressure}HPa`, 
            `Humidity ${resHumidity}%` 
        ]

        const ul = document.querySelector('ul');
        array.forEach((value) =>{
            const li = document.createElement('li');
            li.innerText = value
            ul.appendChild(li)
        })

    })

    

}

runApp();


			
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WeatherApp - Rob</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> 
    <link rel="stylesheet" href="./style.css">
</head>
<body>

    <div class="left-container">

        <div class="form-container">
            <form id="searchForm">
                <input type="text" placeholder="Weather in" name="query" id="searchInput">
            </form>
    
        </div>
        <div class="weather-output">
            <h2 id="temp"></h2>
            <h2 id="searchingCity"></h2>
            <h2 id="skyStatus"></h2>
        </div>

        <div class="right-container">
            <h2 id="right-header">Informacje dodatkowe</h2>
            <div class="more-info-container">
                <ul></ul>
            </div>
            
        </div>
    </div>


    <script src="./app2.js"></script>
</body>
</html>

Anonymous Asked question May 13, 2021