输入另一个输入时删除以前的数据

Question

数据只是与之前的结果相加。我想在输入另一个城市时删除前一个。我使用 openweather API。

我制作了刷新按钮来重新加载页面，然后再输入另一个输入。但我想要的是在输入另一个城市时删除以前的结果而不重新加载页面。在这种情况下我使用 JavaScript。

function fetchWeather(city){
    //displayLoading();
    const fetchAPI = fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${api}&units=metric`);

    fetchAPI.then(response => {
        return response.json();
    }).then(data => {
        //hideLoading();
        displayWeather(data)
    })
    .catch(err => {
        error.style.display = "block";
        console.log(err);
    })
}

//Fetch daily and hourly forecast
function fetchForecast(city) {
    const url = `https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=${api}&units=metric&cnt=25`;
    fetch(url).then(response => {
        return response.json();
    }).then(data => displayForecast(data))
    .catch(err => {
        console.log(err);
    })
}

//Display animated weather icon
function displayWeatherIcon(weather){

    const icon = document.createElement("img");

    switch(weather){
        case "clear sky":
            icon.setAttribute("src", "./images/clear-day.svg");
            break;
        case "few clouds":
            icon.setAttribute("src", "./images/partly-cloudy-day.svg");
            break;
        case "scattered clouds":
            icon.setAttribute("src", "./images/cloudy.svg");
            break;
        case "overcast clouds":
        case "broken clouds":
            icon.setAttribute("src", "./images/overcast.svg");
            break;
        case "shower rain":
            icon.setAttribute("src", "./images/overcast-rain.svg");
            break;
        case "light rain":
        case "moderate rain":
        case "rain":
            icon.setAttribute("src", "./images/overcast-day-drizzle.svg");
            break;
        case "thunderstorm":
            icon.setAttribute("src", "./images/thunderstorm-overcast.svg");
            break;
        case "snow":
            icon.setAttribute("src", "./images/snow.svg");
            break;
        case "mist":
            icon.setAttribute("src", "./images/mist.svg");
            break;
                
    }

    row.prepend(icon);
}

//Display weather informations from fetched api
function displayWeather(weather){
    // console.log(weather);

    const city = document.createElement("h1");
    city.innerHTML = `${weather.name}, ${weather.sys.country}`;
    header.prepend(city);

    const weatherDesc = weather.weather[0].description;
    displayWeatherIcon(weatherDesc);

    const temp = document.createElement("p");
    const temperature = weather.main.temp;
    temp.innerHTML = `${temperature.toFixed()}°C`;
    row.append(temp);


    info.style.backgroundColor = "#F0F0F0";

    const desc = document.createElement("p");
    desc.innerHTML = weather.weather[0].description;
    info.append(desc);
    const cloudIcon = document.createElement("i");
    cloudIcon.setAttribute("class","fas fa-cloud-sun-rain");
    desc.prepend(cloudIcon);

    const humidity = document.createElement("p");
    humidity.innerHTML = `Humidity: ${weather.main.humidity}%`;
    info.append(humidity);
    const humidIcon = document.createElement("i");
    humidIcon.setAttribute("class","fas fa-water");
    humidity.prepend(humidIcon);

    const wind = document.createElement("p");
    wind.innerHTML = `Wind: ${weather.wind.speed} m/s`;
    info.append(wind);
    const windIcon = document.createElement("i");
    windIcon.setAttribute("class","fas fa-wind");
    wind.prepend(windIcon);
}

//Display daily forecast informations from fetched api
function displayForecast(forecast){
    console.log(forecast.list);

    const list = forecast.list;

    for(let index = 7; index < list.length; index+=8){
        const col_one = document.createElement("div");
        const col_one_time = document.createElement("div");
        let dateString = list[index].dt_txt;
        let date = new Date(dateString).toLocaleDateString('en-us', {weekday:'long'})
        let time = new Date(dateString).toLocaleTimeString('en-us', {hour: '2-digit', minute: '2-digit'})
        col_one.setAttribute("class", `column-${index}`);
        col_one.innerHTML = date;
        col_one_time.innerHTML = time;
        middle.append(col_one);
        col_one.append(col_one_time);

        let col_one_icon = document.createElement("img");
        col_one_icon.setAttribute("src", "http://openweathermap.org/img/w/" + list[index].weather[0].icon + ".png");
        col_one.append(col_one_icon);

        let col_one_temp = document.createElement("div");
        col_one_temp.innerHTML = `${list[index].main.temp.toFixed(0)}°C`;
        col_one.append(col_one_temp);
    }
}


function handleClick(event){
    event.preventDefault();
    const cityInput = document.getElementById("cityInput").value;
    fetchWeather(cityInput);
    fetchForecast(cityInput);
}

function refreshPage(){
    window.location.reload();
}

const button = document.querySelector('#enter');
button.addEventListener('click', handleClick);

const refresh = document.querySelector('#refresh');
refresh.addEventListener('click', refreshPage);

<div>
    <input id="cityInput">
    <button id="enter" >Enter</button>
    <button id="refresh">Refresh</button>
</div>

Answer 1

你可以这样做

function reset(){
    const cityInput = document.getElementById("cityInput").value;
    cityInput.value = "";
    //.......
}