Yesterday, I spent a considerable amount of time attempting to troubleshoot an error without any success. Despite everything else functioning correctly, the error keeps me concerned, prompting me to revisit and refactor the code. I've experimented with various solutions, such as changing variable names, using window.addEventListener, reverting to older versions, and debugging each step one by one. Nonetheless, nothing seems to resolve the issue. The error message specifically points to a problem occurring at setupDay.
Uncaught (in promise) TypeError: Cannot set properties of null (setting 'innerHTML') at setupDay (getWeatherInfo.js:37:23)Below is the snippet of code:
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>
...
getCurrentWeather.html
<!DOCTYPE html>
...