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>中也可以完美实现效果。