window.onload的简单使用

来源：互联网发布：calendar java设置今天编辑：程序博客网时间：2024/05/23 14:16

<!DOCTYPE html><html><head><script>document.getElementById("btn").onclick = function() {    alert("btn");}window.onload=function() {    alert("btn111111");}</script></head><body><input id="btn" type="button" value="测试"></body></html>

这里当加载页面完成的时候，并没有弹出alert对话框，原因就是这一段代码导致的。

当页面从上到下开始解析的时候，由于id为btn的元素还不存在，所以上面是会导致问题。

document.getElementById("btn").onclick = function() {    alert("btn");}

F12打开调试界面：

就可以看到这里给出的信息提示：Uncaught TypeError: Cannot set property 'onclick' of null(…)

页面加载完成就会弹出alert对话框。

正确代码如下：

<!DOCTYPE html><html><head><script>window.onload=function() {    alert("btn111111");}</script></head><body><input id="btn" type="button" value="测试"></body></html>

或者：

<!DOCTYPE html><html><head><script>window.onload=function() {    document.getElementById("btn").onclick = function() {        alert("btn");    }}</script></head><body><input id="btn" type="button" value="测试"></body></html>

0 0