All geek questions in one place

Cannot call addEventListener method of null method

I am writing some javascript to get weather information from url. But Google Chrome shows an error:

Uncaught TypeError: Cannot call method 'addEventListener' of null weather.html:37 (anonymous function)

Any suggestions for fixing this? Thanks!

 <html> <head> <title>My weather</title> <script type="text/javascript"> function fetchWeather(){ var xmlHttp = new XMLHttpRequest(); // Initialize our XMLHttpRequest instance xmlHttp.open("GET", "http://classes.engineering.wustl.edu/cse330/content/weather_json.php", true); xmlHttp.addEventListener("load", ajaxCallback, false); xmlHttp.send(null); } function ajaxCallback(event){ var htmlParent = document.getElementById("weatherWidget"); // Get the HTML element var jsonData = JSON.parse(event.target.responseText); var loc = document.getElementById("weatherWidget").getElementsByClassName("weather-loc")[0]; loc.appendChild(document.createTextNode(jsonData.location.city+" "+jsonData.location.state)); var humidity = document.getElementById("weatherWidget").getElementsByClassName("weather-humidity")[0]; humidity.appendChild(document.createTextNode("Humidity: "+jsonData.atmosphere.humidity+"%")); var temp = document.getElementById("weatherWidget").getElementsByClassName("weather-temp")[0]; temp.appendChild(document.createTextNode("Currently: "+jsonData.current.temp)); var tomorrow = document.getElementById("weatherWidget").getElementsByClassName("weather-tomorrow")[0]; tomorrow.appendChild(document.setAttribute("src", jsonData.current.temp)); tomorrow.alt = jsonData.tomorrow.text; tomorrow.src = "http://us.yimg.com/i/us/nws/weather/gr/"+jsonData.tomorrow.code+"ds.png" var dayaftertomorrow = document.getElementById("weatherWidget").getElementsByClassName("weather-dayaftertomorrow")[0]; dayaftertomorrow.appendChild(document.setAttribute("src", jsonData.current.temp)); dayaftertomorrow.alt = jsonData.dayafter.text; dayaftertomorrow.src = "http://us.yimg.com/i/us/nws/weather/gr/"+jsonData.dayafter.code+"ds.png" } document.getElementById("update").addEventListener("click", fetchWeather, false); // bind fetchWeather() to the DOMContentLoaded event //so that your weather widget is automatically initialized //when the page is loaded </script> </head> <body> <div class="weather" id="weatherWidget"> <div class="weather-loc"></div> <div class="weather-humidity"></div> <div class="weather-temp"></div> <img class="weather-tomorrow" /> <img class="weather-dayaftertomorrow" /> </div> <button id="update">Update</button> </body> </html>
+4
source share
1 answer

The update element does not exist yet when you try to access it.

Either put the line document.getElementById('update')... at the end of the <body> element, or put it in a window.onload handler.

+2
source

Source: https://habr.com/ru/post/1492397/

More articles:


All Articles