Блог

Главная - Вопросы по программированию - Как я могу заменить элемент после другого запроса?

Как я могу заменить элемент после другого запроса?

#javascript #html

Вопрос:

Я пишу простое приложение JS, которое показывает погоду. После первого запроса переменные типа searchTerm или каждая переменная из array добавляются к определенному элементу. Но после другого запроса они не переопределяются, а добавляются рядом с предыдущим. Как я могу это исправить? Должен ли я использовать innerHTML или просто обновить страницу после другого вызова API?

 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}amp;units=metricamp;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>

Ответ №1:

Вам нужно очистить результат, который вы получите раньше

Просто добавьте:

 searchCity.innerHTML = '';
...

currentTemp.innerHTML = '';
....
ul.innerHTML = '';
 
 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}amp;units=metricamp;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.innerHTML = '';
        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.innerHTML = '';
        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');
        ul.innerHTML = '';
        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>

Комментарии:

1. Так просто и отлично работает. Я пробовал все, но не самый простой метод. Спасибо, Грег!

2. Вместо того, чтобы очищать его, innerHTML='' а затем добавлять текст в теперь пустую ячейку, вы можете просто установить нужный текст в первую очередь: currentTemp.innerHTML = `${Math.floor(resTemp)}°C`

Метки: