时间戳

首页 > 解决方案 > 如何在另一个查询后替换元素？

javascript - 如何在另一个查询后替换元素？

问题描述

我正在编写显示天气的简单 JS 应用程序。在第一次查询变量之后，searchTerm或者每个变量array都附加到特定元素。但是在另一个查询之后，它们不会被覆盖，而是添加到前一个查询旁边。我该如何解决？在另一个 API 调用之后，我应该使用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}&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>

标签： javascripthtml

解决方案

您需要清除之前获得的结果

只需添加：

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}&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.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>

推荐阅读