您的位置：首页 > Web前端 > JavaScript

JS点击事件——Uncaught TypeError: Cannot set property 'onclick' of null

2015-08-14 16:59 911 查看

html代码：

<body>
<button id="button">点击我</button>
<img id="image" src="cat.png" width="100px">
</body>

JS代码：

<script>
var button = document.getElementById("button"),
image = document.getElementById("image");

button.onclick = function () {
image.style.display = "none";
};
</script>

需要实现的效果：单击button按钮时image消失。

我的做法：相关代码如上面所示，把js代码放在<head>中，于是报错Uncaught TypeError: Cannot set property 'onclick' of null。

改进做法：把JS代码放到</body>结束之前，完美实现。

提问：为什么会出现这种情况？是不是与JS代码的执行顺序有关。

解答：通过查阅一些资料，了解到放在<head>中的JS代码是优先于页面被执行的：

来源：点击打开链接

另一种方法也可达到目的：把原本的JS代码放入window.onload=function() { ... }中，window.onload表示页面加载完成后执行的函数，这样JS代码即使放在<head>中也可以完美实现效果。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JavaScript 前端 html

相关文章推荐

新的分享

章节导航