logo标签列表

无法调用空对象的addEventListener方法错误。

javascript
4
我写了一些 JavaScript 代码来从 URL 中获取天气信息。但是 Google Chrome 显示错误：
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>
6
当DOM还没有准备好时，你正在使用它。一个简单的解决方案是将此行代码 document.getElementById("update").addEventListener("click", fetchWeather, false); 包装在 window.onload 函数中！ - Niccolò Campolungo
1
把你的脚本块放在页面body结束标签上方。 - Musa
你们两个都应该把你们的建议作为答案发布。 - Barmar
@Barmar 为什么？只是为了获得声望吗？我不认为这是正确看待 SO 的方式 :) - Niccolò Campolungo
1
@LightStyle 因为答案应该在答案中，而不是在评论中。 - Barmar
显示剩余2条评论
1个回答
2

当您尝试访问它时，update元素尚不存在。

请将document.getElementById('update')...行放在<body>元素的末尾，或将其放在window.onload处理程序中。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接