扫码关注官方订阅号
点我
业精于勤，荒于嬉;行成于思，毁于随。
因为html文档时从上往下执行的，按钮如果在script下面，var x = document.getElementById("demo");执行完了x是undefined，再执行x.addEventListener("click", myFunction);就报错了。
html
script
var x = document.getElementById("demo");
x
undefined
x.addEventListener("click", myFunction);
看到这个var x = document.getElementById("demo");没有如果按钮在这个的后面就会导致x取不到这个对象了,所以就不能添加事件了;总的来说这是因为代码是自上而下加载
并非是要放在函数之前，照你的写法，script标签优先于button标签解析，你可以加一行代码在var x下面，console.log(x)，会返回一个null。原因是js代码执行的时候button并未被浏览器解析到。你不能给给一个null绑定事件监听。所以这也是为什么一般建议html里面把js引入放在页面最末尾的原因
js代码放到load里就不用管顺序了。
你可以去看看页面js加载相关知识。如果button在js下面的话，document.getElementById("demo")拿不到demo元素，所以也没法注册事件。
因为js的变量提升大概的声明顺序 是
function myFunction(){} var x ; x=document.getElementById("demo")
具体自行百度
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
0 
6
488
收藏
因为
html文档时从上往下执行的，按钮如果在script下面，var x = document.getElementById("demo");执行完了x是undefined，再执行x.addEventListener("click", myFunction);就报错了。看到这个var x = document.getElementById("demo");没有
如果按钮在这个的后面就会导致x取不到这个对象了,所以就不能添加事件了;
总的来说这是因为代码是自上而下加载
并非是要放在函数之前，照你的写法，script标签优先于button标签解析，
你可以加一行代码在var x下面，console.log(x)，会返回一个null。
原因是js代码执行的时候button并未被浏览器解析到。你不能给给一个null
绑定事件监听。所以这也是为什么一般建议html里面把js引入放在页面最末尾的原因
js代码放到load里就不用管顺序了。
你可以去看看页面js加载相关知识。
如果button在js下面的话，document.getElementById("demo")拿不到demo元素，所以也没法注册事件。
因为js的变量提升
大概的声明顺序 是
具体自行百度