無法調用空錯誤的方法'addEventListener'

我寫了一些JavaScript來從網址獲取天氣信息。但谷歌瀏覽器顯示錯誤：無法調用空錯誤的方法'addEventListener'

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

有關修復此問題的任何建議嗎？謝謝！

<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>

來源

2013-07-19 user2514364

您在未準備好時使用DOM。一個簡單的解決方案是在'window.onload'函數中包裝這行'document.getElementById（「update」）。addEventListener（「click」，fetchWeather，false）;''！ –

將您的腳本塊放在身體標記末端的上方 – Musa

您都應該將您的建議發佈爲答案。 – Barmar

當您嘗試訪問它時，update元素還不存在。

要麼將document.getElementById('update')...行放在<body>元素的末尾，要麼將其放入window.onload處理程序中。

來源

2013-07-19 22:15:29

無法調用空錯誤的方法'addEventListener'

回答

相關問題