I am working on creating a weather app however, it is showing me this error: “Cannot read properties of null (reading ‘addEventListener’)”.Below is the javascript code.
let apiUrl = "https://api.openweathermap.org/data/2.5/weather?units=metric&q=";
let searchBox = document.querySelector(".search input");
let searchBtn = document.querySelector(".search button");
async function FetchWeatherDataByCityName(city) {
const response = await fetch(apiUrl + city + `&appid=${apiKey}`);
var data = await response.json();
console.log(data);
// handleTemp.innerHTML =
// handleWeatherIcon.innerHTML = data.weather[0].main;
document.querySelector(".city-heading").innerHTML = data.name;
document.querySelector(".temp-heading").innerHTML =
Math.round(data.main.temp) + "°C";
document.querySelector(".weather-icon").innerHTML = data.weather[0].main;
document.querySelector(".h3-humidity-heading").innerHTML =
data.main.humidity + "%";
document.querySelector(".h3-wind-speed").innerHTML =
data.wind.speed + " Km/h";
// Choosing the weather icon
if (data.weather[0].main == "Clouds") {
document.querySelector(".weather-icon").src = "images/clouds.png";
} else if (data.weather[0].main == "Clear") {
document.querySelector(".weather-icon").src = "images/clear.png";
} else if (data.weather[0].main == "Drizzle") {
document.querySelector(".weather-icon").src = "images/drizzle.png";
} else if (data.weather[0].main == "Mist") {
document.querySelector(".weather-icon").src = "images/mist.png";
} else if (data.weather[0].main == "Rain") {
document.querySelector(".weather-icon").src = "images/rain.png";
} else if (data.weather[0].main == "Snow") {
document.querySelector(".weather-icon").src = "images/snow.png";
}
}
searchBtn.addEventListener("click", () => {
FetchWeatherDataByCityName(searchBox.value);
});
// Here is the html code. Adding some text to balance the code to text ratio for submitting the question. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Weather App</title>
<link rel="stylesheet" href="./styles.css" />
<script src="./index.js"></script>
</head>
<body class="body-styles">
<div class="weather-app-card">
<div class="input-and-search-icon-styling">
<div class="search">
<input
class="search-input"
type="text"
placeholder="Enter City Name"
/>
</div>
<div class="search">
<button class="search-icon-btn">
<img class="search-icon" src="./images/search.png" alt="" />
</button>
</div>
</div>
<div class="">
<img class="weather-icon" src="./images/clear.png" alt="" />
</div>
<div>
<h1 class="temp-heading">7°C</h1>
<h2 class="city-heading">New York</h2>
</div>
<div class="humidity-and-wind-speed">
<div class="humidity-icon-and-text">
<div>
<img class="humidity-image" src="./images/humidity.png" alt="" />
</div>
<div class="humidity-percentage">
<h3 class="h3-humidity-heading">48%</h3>
<h4 class="h4-humidity">Humidity</h4>
</div>
</div>
<div class="wind-speed-icon-and-text">
<div>
<img class="wind-image" src="./images/wind.png" alt="" />
</div>
<div>
<h3 class="h3-wind-speed">10.29Km/h</h3>
<h4 class="h4-wind-speed">wind speed</h4>
</div>
</div>
</div>
</div>
</body>
</html>