JavaScript放头部不执行的情况（针对新手）

最新推荐文章于 2024-05-03 11:08:18 发布

weixin_33670786

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量407

点赞数 1

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/Cubicluo/blog/671338

版权

2019独角兽企业重金招聘Python工程师标准>>>

浏览器执行顺序是从上到下，从左到右，遇到JavaScript脚本时要下载完脚本并执行才会继续加载其他的，如果脚本放在所执行函数用到的HTML对象前执行就会失效，因为当浏览器执行时，浏览器还没有加载好你用到的HTML对象，所以会报错（函数没写 window.onload的前提下）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>javascript不执行</title>
</head>
 //在涉及的执行对象前面，对象未加载就执行了，也就是找不到对象，此时无效.（从上到下执行）
<script type="text/javascript">   
    alert(document.getElementById('one').innerHTML)
</script>
<body>
    //执行脚本的对象如下
    <div id="one">为什么呢？</div>
</body>
</html>

会报错：TypeError: document.getElementById(...) is null

解决办法：

脚本放在底部，或者放在脚本要执行时涉及到的HTML对象后面：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>javascript不执行</title>
</head>

<body>
    <div id="one">为什么呢？</div>
    //执行的对象如上
    
    //此时，执行对象先加载好了，然后再执行的script，此时有效.（从上到下执行）
    <script type="text/javascript">
        alert(document.getElementById('one').innerHTML)
    </script>
</body>
</html>

2.增加window.onload，然后随意放哪里

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>javascript不执行</title>
</head>
<script type="text/javascript">
//window.onload的意思是文档加载完后执行，这样就可以了
 window.onload=function start(){
     alert(document.getElementById('one').innerHTML)
 }
    
</script>
<body>
    <div id="one">为什么呢？</div>
</body>
</html>

本文只针对新手，不喜勿喷，有错误的地方请指正，（仅供参考，后果自负）

转载于:https://my.oschina.net/Cubicluo/blog/671338