JavaScript 这句怎么不能在 function 外面声明?

我记得以前学的时候,只要在全局声明了变量,function 内也能用,可这里为什么出错呢?

正常情况:

<script>

    function addTextNode(text)
    {
        var newtext = document.createTextNode(text);
        var p1 = document.getElementById("p1");     //这句为什么不能定义在外面!!
        p1.appendChild(newtext);
    }

</script>

<body>
    <button onclick="addTextNode('WE CAN!');">WE CAN!</button>
    <hr/>
    <p id="p1">First line of paragraph.</p>
</body>

错误情况:

<script>
    var p1 = document.getElementById("p1");     //这句为什么不能定义在外面!!

    function addTextNode(text)
    {
        var newtext = document.createTextNode(text);
        p1.appendChild(newtext);
    }
</script>

<body>
    <button onclick="addTextNode('WE CAN!');">WE CAN!</button>
    <hr/>
    <p id="p1">First line of paragraph.</p>
</body>
阅读 4.3k
7 个回答

在执行<script>的时候,文档还没有载入完,<p id="p1">在下面,还没被载入,所以此处var p1获取不到东西。如果把这段script放到<p id="p1">的下面,就能正常工作。

楼上的几位都说的很清楚啦,放在外面的前提要加一个 window.onload=function(){.....},因为DOM还没有ready,此时不存在P1这个节点。
写在函数里面只有被点击的时候才会执行这个函数,此时DOM已经ready了,所以可以获取到P1这个节点

楼上正解,如果你要在文档头部写script你要用window.onload事件。

放在外面的话,那一句是在script是在文档加载之前就要执行的,所以此时是找不到p的,把script放在body后面就不会报错了

执行脚本的时候dom树还没渲染,找不到那个id

js加载是顺序加载,注意这点会少犯很多错误 ~

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题