For循环问题？ Uncaught (in promise) TypeError: cannot set properties of null (setting 'inner text)

Question

我正在尝试使用 for 循环遍历来自开放天气 map API 的数据，该数据返回来自 5 天预报的数据。 目前我正在构建天气应用程序，它不仅提供用户输入提供的当前城市数据，还提供同一城市的每周数据。 到目前为止，我所有当前的天气数据都是从 API 正确获取和显示的。 我选择使用 for 循环来获取一周中每一天的最低和最高温度以及天气图标。 到目前为止，我的代码本身没有显示任何问题。 但是，当我在浏览器控制台中运行 FetchWeeklyWeatherInfo function 时，它会返回一个错误，内容为： uncaught (in promise) TypeError: cannot set properties of null (setting 'inner text) at weather app.js:33:86 while for-loop诚然，这对我来说有点挑战性，我根本没有在这里看到这个问题。

JavaScript：

function fetchCurrentWeatherInfo (city) {
const currentWeatherUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=imperial&appid=${currentWeatherApiTag}`;
fetch(currentWeatherUrl)
.then((response) => response.json())
.then((data) => unveilCurrentWeather(data));

};   

 function unveilCurrentWeather (data) {
 const {name} = data;
 const {icon} = data.weather[0];
 const {description} = data.weather[0];
 const {temp} = data.main;
 const {humidity} = (data.main);
 const {speed} = data.wind;
 console.log(name, icon, description, temp, humidity, speed);
 document.querySelector("#City").innerText = "Weather in " + name;
 document.querySelector(".weather-icon").src =`http://openweathermap.org/img/wn/${data.weather[0].icon}.png`;
 document.querySelector("#CityWeatherDescription").innerText = description;
 document.querySelector("#Temperature").innerText = temp + " °F";
 document.querySelector (".humidity-weather-stat").innerText = "Humidity : " +  humidity + "%";
 document.querySelector(".wind-speed-weather-stat").innerText = "Wind Speed : " + speed + "m/hr";

};

function fetchWeeklyWeatherInfo (city) {
    const weekWeatherUrl = `https://api.openweathermap.org/data/2.5/forecast?q=${city}&units=imperial&appid=${weekForecastApiTag}`;
    fetch(weekWeatherUrl)
    .then((response) => response.json())
    .then(data => {
        for(i=0; i<5; i++) {
        document.querySelector(".day-of-the-week" +(i+1)+".temp-high").innerText = "High :" + Number(data.list[0].main.temp_max -74.57).toFixed(2) + "°F";
    }
    for(i=0; i<5; i++) {
        document.querySelector(".day-of-the-week" +(i+1)+".temp-low").innerText = "Low :" + Number(data.list[0].main.temp_min -74.57).toFixed(2) + "°F";
    }
    for(i=0; i<5; i++) {
        document.querySelector(".weather-icon" +(i+1)).src = `http://openweathermap.org/img/wn/${data.list[0].weather[0].icon}.png`;
}
});


function searchCurrentWeather () {
fetchCurrentWeatherInfo(document.querySelector("#Search-Bubble").value);
};


document.getElementById("SearchBtn").addEventListener("click", function () {
searchCurrentWeather();

});

document.getElementById("Search-Bubble").addEventListener("keyup", function (event) {
if (event.key === "Enter") {
searchCurrentWeather();
}
});

};

这可能是简单或更复杂的事情，但我需要重新审视这个问题，谢谢！

Answer 1

只是在这里猜测一下，但尝试将您的 DOM 相关函数和 vars 放在类似下面的某种 onloaded 事件中：

const el = document.getElementById("el") // NOT AVAILABLE

window.addEventListener("load", function() {
   const el = document.getElementById("el") // YAY AVAILABLE
})

还有一些复制粘贴操作：

function doSomething() {
  console.info('DOM loaded');
}

if (document.readyState === 'loading') {  // Loading hasn't finished yet
  document.addEventListener('DOMContentLoaded', doSomething);
} else {  // `DOMContentLoaded` has already fired
  doSomething();
}

所以你可以把你的函数放在你的脚本中，然后当你想调用它们，或者当你想声明一个等于某个DOM元素的变量时，你把它放在加载事件中。

// SearchBtn wont exist out here - put inside onload event!!

window.addEventListener("load", function() {
   // SearchBtn & your other DOM elements WILL exist in here!!
   document.getElementById("SearchBtn").addEventListener("click", 
      function () {
          searchCurrentWeather();
     });

document.getElementById("SearchBubble").addEventListener("keyup", 
function (event) {
    if (event.key === "Enter") {
        searchCurrentWeather();
    }
})