Uncaught(inpromise)TypeError:Cannotsetpropertiesofnull(setting'innerHTML')-有解無憂

我昨天花了很大一部分時間試圖找出導致此錯誤的原因，但從未弄清楚。一切似乎都正常，我想回去重構它，但這個錯誤與我有關。我已經嘗試了很多事情（更改變數名稱/使用 window.addEventListener / 回到舊版本并采取每個步驟直到發生錯誤......等等......）。似乎沒有什么可以幫助擺脫它。錯誤很明顯。它說問題發生在 setupDay。

Uncaught (in promise) TypeError: Cannot set properties of null (setting 'innerHTML') at setupDay (getWeatherInfo.js:37:23)

這是代碼：

getWeatherInfo.js



import { FetchWrapper } from "./fetchWrapper.js";

const apiKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
const unit = "imperial";
const form = document.querySelector("#weatherForm");
const zip = document.querySelector("#zipcode");
const country = "us";

// Event listener for form submit
form.addEventListener("submit", (event) => {
  event.preventDefault();
  getWeatherInfo(zip.value);
});

const geoAPI = new FetchWrapper("https://api.openweathermap.org/geo/1.0/");
const API = new FetchWrapper("https://api.openweathermap.org/data/2.5/");

const getWeatherInfo = (zip) => {
  const endpoint = `zip?zip=${zip},${country}&appid=${apiKey}&units=${unit}`;
  geoAPI.get(endpoint).then((data) => {
    const lat = data.lat;
    const lon = data.lon;
    const weatherEndpoint = `weather?lat=${lat}&lon=${lon}&appid=${apiKey}&units=${unit}`;
    const fiveDayEndpoint = `forecast?lat=${lat}&lon=${lon}&appid=${apiKey}&units=${unit}`;

    // ----------------- Current Weather ----------------- //

    API.get(weatherEndpoint).then((data) => {
      
      function setupDay(value) {
        let tempValue = document.querySelector("#weather-body-temp-value");
        tempValue.innerHTML = value.main.temp;

        let feelsLike = document.querySelector("#weather-body-feels-like-value");
        feelsLike.innerHTML = value.main.feels_like;

        let weatherDescription = document.querySelector("#weather-body-description");
        weatherDescription.innerHTML = value.weather[0].description;

        let weatherIcon = document.querySelector("#weather-body-description-icon");
        weatherIcon.innerHTML = `<img src="http://openweathermap.org/img/wn/${value.weather[0].icon}@2x.png">`;

        let windSpeed = document.querySelector("#weather-body-wind-value");
        windSpeed.innerHTML = value.wind.speed;

        let cityName = document.querySelector("#weather-body-city-value");
        cityName.innerHTML = value.name;

        let sunrise = document.querySelector("#weather-body-sunrise-value");
        sunrise.innerHTML = unixTimeConvertor(value.sys.sunrise);

        let sunset = document.querySelector("#weather-body-sunset-value");
        sunset.innerHTML = unixTimeConvertor(value.sys.sunset);
      }
  
      setupDay(data);
    });

    // ----------------- 5 Day Forecast ----------------- //

    API.get(fiveDayEndpoint).then((data) => {
      const day1 = data.list[0];
      const day2 = data.list[8];
      const day3 = data.list[16];
      const day4 = data.list[24];
      const day5 = data.list[32];
      
      function setupDays (value, dayNumber)  {
        let temperature = document.querySelector("#day"   dayNumber);
        temperature.innerHTML = value.main.temp;

        let humidity = document.querySelector("#day"   dayNumber   "-humidity");
        humidity.innerHTML = value.main.humidity;

        let description = document.querySelector("#day"   dayNumber   "-description");
        description.innerHTML = value.weather[0].description;

        let icon = document.querySelector("#day"   dayNumber   "-icon");
        icon.innerHTML = `<img src="http://openweathermap.org/img/wn/${value.weather[0].icon}@2x.png">`;
      };
      setupDays(day1, 1);
      setupDays(day2, 2);
      setupDays(day3, 3);
      setupDays(day4, 4);
      setupDays(day5, 5);
    });
  });
};

const unixTimeConvertor = (unixTimestamp) => {
  const dateObject = new Date(unixTimestamp * 1000);
  const date = dateObject.toLocaleString("en-US", {
    hour: "numeric",
    minute: "numeric",
    second: "numeric",
  });
  return date;
};

fetchWrapper.js

//fetchwrapper.js
export class FetchWrapper {
  constructor(baseURL) {
    this.baseURL = baseURL;
  }

  get(endpoint) {
    return fetch(this.baseURL   endpoint).then((response) => {
      return response.json();
    });
  }
}

getFiveDayWeather.html


<!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" />
  <!-- <link href="index.css" rel="stylesheet" type="text/css" /> -->
  <link href="getFiveDayWeather.css" rel="stylesheet" type="text/css" />
  <title>Open Weather API</title>
</head>

<body>
  <nav>
    <ul class="nav-container">
      <li><a href="index.html">Home</a></li>
      <li><a href="projects.html">Projects</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
  </nav>
  <h2>Open Weather API Project</h2>
  <form id="weatherForm">
    <input type="text" id="zipcode" placeholder="Enter zip code" />
    <input type="submit" value="Submit" />
  </form>
  <a href="getCurrentWeather.html">Get Current Weather</a>
  <!-- 5 day forcast table -->
  <div id="weather-container">
    <table>
      <caption>
        <h2>Five Day Forecast</h2>
      </caption>
      <!-- table header x axis -->
      <tr>
        <th height="70px" width="250">5 Day Forecast</th>
        <th height="70px" width="250">Avg. Temp.</th>
        <th height="70px" width="250">Humidity %</th>
        <th height="70px" width="250">Weather Desc.</th>
      </tr>

      <!-- table header y axis -->
      <tr>
        <th height="70px">Day 1</th>
        <td>
          <p id="day1"></p>
        </td>
        <td>
          <p id="day1-humidity"></p>
        </td>
        <td>
          <p id="day1-description"></p>
          <p id="day1-icon"></p>
        </td>
      </tr>

      <tr>
        <th height="70px">Day 2</th>
        <td>
          <p id="day2"></p>
        </td>
        <td>
          <p id="day2-humidity"></p>
        </td>
        <td>
          <p id="day2-description"></p>
          <p id="day2-icon"></p>
        </td>

      </tr>

      <tr>
        <th height="70px">Day 3</th>
        <td>
          <p id="day3"></p>
        </td>
        <td>
          <p id="day3-humidity"></p>
        </td>
        <td>
          <p id="day3-description"></p>
          <p id="day3-icon"></p>
        </td>
      </tr>

      <tr>
        <th height="70px">Day 4</th>
        <td>
          <p id="day4"></p>
        </td>
        <td>
          <p id="day4-humidity"></p>
        </td>
        <td>
          <p id="day4-description"></p>
          <p id="day4-icon"></p>
        </td>
      </tr>

      <tr>
        <th height="70px">Day 5</th>
        <td>
          <p id="day5"></p>
        </td>
        <td>
          <p id="day5-humidity"></p>
        </td>
        <td>
          <p id="day5-description"></p>
          <p id="day5-icon"></p>
        </td>
      </tr>
    </table>

  </div>

  <footer id="footer">
    <a href="https://github.com/jim3" target="_blank" style="color: yellow">
      <li>Github</li>
    </a>
  </footer>

  <script type="module" src="getWeatherInfo.js"></script>
  <script type="module" src="fetchWrapper.js"></script>
  <!-- <script src="fetchWrapper.js"></script> -->
  <!-- <script src="activateStickyFooter.js"></script> -->
</body>

</html>

getCurrentWeather.html


<!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" />
  <link href="getCurrentWeather.css" rel="stylesheet" type="text/css" />
  <title>Open Weather API</title>
</head>

<body>
  <nav>
    <ul class="nav-container">
      <li><a href="index.html">Home</a></li>
      <li><a href="projects.html">Projects</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
  </nav>
  <h2>Open Weather API Project</h2>
  <form id="weatherForm">
    <input type="text" id="zipcode" placeholder="Enter zip code" />
    <input type="submit" value="Submit" />
  </form>
  <a href="getFiveDayWeather.html">Get Five Day Forecast</a>
  <!-- start of weather container -->
  <div id="weather-container">
    <table>
      <caption>
        <h3>Current Weather Info<h3>
      </caption>
      <tr>
        <th>City</th>
        <td>
          <p id="weather-body-city-value"></p>
        </td>
      </tr>
      <tr>
        <th>Temperature</th>
        <td>
          <p id="weather-body-temp-value"></p>
        </td>
      </tr>
      <tr>
        <th>Feels Like</th>
        <td>
          <p id="weather-body-feels-like-value"></p>
        </td>
      </tr>

      <tr>
        <th>Description</th>
        <td>
          <p id="weather-body-description"></p>
          <p id="weather-body-description-icon"></p>
        </td>
      </tr>

      <tr>
        <th>Wind Speed</th>
        <td>
          <p id="weather-body-wind-value"></p>
        </td>
      </tr>
      <tr>
        <th>Sunrise</th>
        <td>
          <p id="weather-body-sunrise-value"></p>
        </td>
      </tr>
      <tr>
        <th>Sunset</th>
        <td>
          <p id="weather-body-sunset-value"></p>
        </td>
      </tr>
    </table>
  </div>
  <script type="module" src="getWeatherInfo.js"></script>
  <script type="module" src="fetchWrapper.js"></script>
  <!-- <script src="fetchWrapper.js"></script> -->
</body>

</html>

uj5u.com熱心網友回復：

您有兩個 HTML 頁面，其元素具有不同的 ID，但您嘗試從 JavaScript 無條件地獲取所有元素。

如果你在，getFiveDayWeather.html那么setupDay()將失敗，因為沒有#weather-body-temp-value，如果你在，getCurrentWeather.html那么setupDays()將失敗，因為沒有#day1。

它仍然有效的原因是因為這些錯誤發生在 Promise 回呼中，因此它們終止了它們發生的函式，但不影響其余代碼。

為了解決這個問題，找到一種方法來僅運行API.get(weatherEndpoint)或API.get(fiveDayEndpoint)，有條件地基于您所在的 HTML 頁面。一個不是特別漂亮但應該可以正常作業的示例可能如下所示：

if(document.querySelector("#weather-body-temp-value"))
{
  // ----------------- Current Weather ----------------- //
  API.get(weatherEndpoint).then((data) => {
    ...
  });
}
else if(document.querySelector("#day1"))
{
  // ----------------- 5 Day Forecast ----------------- //
  API.get(fiveDayEndpoint).then((data) => {
    ...
  });
}
else
{
  // Throw an error or show an alert or something
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/510251.html

標籤：javascriptdom承诺获取 API

上一篇：我可以在沒有HTML的瀏覽器中運行JavaScript嗎？為什么/為什么不？

下一篇：如何將活動課程保存到本地存盤