时间戳

首页 > 解决方案 > 这些值不会被新值替换

javascript - 这些值不会被新值替换

问题描述

即使我添加了一个新城市，它也会显示我之前搜索过的城市的天气

首先，当我搜索任何城市时，它会正确显示天气，但是当我尝试搜索另一个城市/国家时，它会显示我之前搜索过的同一个城市的详细信息。我认为我的 JavaScript 代码有问题。我认为我从 API 获取的新值不会被旧值取代。

let enterCity = document.querySelector("#enterCity");
let city = document.querySelector(".city");
let country = document.querySelector(".country");
let temp = document.querySelector(".temp");
let text = document.querySelector(".text");

let inputVal = enterCity.value;
// the base url
let url = `http://api.weatherapi.com/v1/current.json?q=${inputVal}&key=cb58be19d0d2****************`;


fetch(url).then((response) => {
    return response.json();
}).then((data) => {
    let search = document.querySelector(".search");
    search.addEventListener("click", () => {
        let container = document.querySelector(".container");

        card = document.createElement("div");
        card.className = "card";
        city = document.createElement("h2");
        city.className = "city";

***问题出在下面的 innerText ***

        city.innerText = data.location.name;
        country = document.createElement("h5");
        country.className = "country";
        country.innerText = data.location.country;
        temp = document.createElement("h4");
        temp.className = "temp";
        temp.innerText = data.current.temp_c;
        span1 = document.createElement("span");
        span1.id = "deg";
        span1.innerText = "°C"
        temp.appendChild(span1);
        icon = document.createElement("img");
        icon.className = "icon";
        icon.src = data.current.condition.icon;
        text = document.createElement("h3");
        text.className = "text";
        text.innerText = data.current.condition.text;


        card.appendChild(city);
        card.appendChild(country);
        card.appendChild(temp);
        card.appendChild(icon);
        card.appendChild(text);

        container.appendChild(card);

在这里，我还清除了我从用户那里获取的输入值

        enterCity.value = "";
    });

});

标签： javascript

解决方案

发生这种情况是因为您没有在输入（输入城市）上添加 onchange 事件侦听器。如果您不添加 onchange 事件，这将只取您的初始值。

所以添加一个 onchange 监听器，然后在其中调用 fetch api。

虚拟示例 -

let entercity=document.querySelector("#entercity");

     entercity.addEventListener('change',()=>{

        let inputVal=entercity.value;
        let url = `http://api.weatherapi.com/v1/current.json?q=${inputVal}&key=cb58be19d0d2476da35134140211107`;
         fetch(url).then((res)=>console.log(res))
         .catch((err)=>console.log(err));
     })

推荐阅读