javascript – 无法调用null错误的方法’addEventListener’
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript – 无法调用null错误的方法’addEventListener’,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2554字,纯文字阅读大概需要4分钟。
内容图文
![javascript – 无法调用null错误的方法’addEventListener’](/upload/InfoBanner/zyjiaocheng/778/e3b2700ff40844929096c3cf67464675.jpg)
我写了一些javascript来从网址获取天气信息.但谷歌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>
解决方法:
当您尝试访问它时,更新元素尚不存在.
将document.getElementById(‘update’)…行放在< body>的末尾.元素,或将其放在window.onload处理程序中.
内容总结
以上是互联网集市为您收集整理的javascript – 无法调用null错误的方法’addEventListener’全部内容,希望文章能够帮你解决javascript – 无法调用null错误的方法’addEventListener’所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。