为什么不能设置' document.getElementById("text");’走向全球

Why can't set `document.getElementById("text"); ` to be global?

本文关键字：quot text 设置 不能 document getElementById 为什么      更新时间：2023-09-26

这是我的60秒计数代码，它运行成功。

<html>
<head>
<script type="text/javascript">
    var start=Date.now();
    function showtime(){
        var c=document.getElementById("text");
        var nowtime=60-Math.floor((Date.now()-start)/1000);
        c.innerHTML="left time is "+ nowtime +" seconds";
    }
    function countTime(){
        var c=document.getElementById("text");
        c.innerHTML="left time is 60 seconds";             
        setInterval("showtime()",1000);
    }
</script>
</head>
<body onload="countTime()">
<div id="text"></div>
</body>
</html>

这里var start=Date.now()使启动一个全局变量，为什么var c=document.getElementById("text");不能写在var start=Date.now();下面，使变量c成为全局变量?

<html>
<head>
<script type="text/javascript">
    var start=Date.now();
    var c=document.getElementById("text");
    function showtime(){
        var nowtime=60-Math.floor((Date.now()-start)/1000);
        c.innerHTML="left time is "+ nowtime +" seconds";
    }
    function countTime(){
        c.innerHTML="left time is 60 seconds";             
        setInterval("showtime()",1000);
    }
</script>
</head>
<body onload="countTime()">
<div id="text"></div>
</body>
</html>

请详细解释为什么设置document.getElementById("text");为全局时程序不能运行

它会工作，但在您的第二个示例中，在脚本运行并试图找到元素时，它不在那里，因为您既没有使用window.onload也没有将脚本放在html下面。不要把javascript放在头部。重新排列代码到

<html>
<head>
</head>
<body onload="countTime()">
<div id="text"></div>
<script type="text/javascript">
    var start=Date.now();
    var c=document.getElementById("text");
    function showtime(){
        var nowtime=60-Math.floor((Date.now()-start)/1000);
        c.innerHTML="left time is "+ nowtime +" seconds";
    }
    function countTime(){
        c.innerHTML="left time is 60 seconds";             
        setInterval("showtime()",1000);
    }
</script>
</body>
</html>

因为你只需要一个DOM元素在你的代码运行时可用，你也可以使用DOMContentLoaded事件，并保持你的代码在头部:

<script>
  document.addEventListener("DOMContentLoaded", function() {
    console.log("DOM fully loaded and parsed");
  });
</script>

然后将所有代码放入事件侦听器。

您正在将<script>加载到<head>文件中，这意味着在生成正文之前脚本已完全加载。

在第一个代码片段中，c=document.getElementById("text")位于脚本中的一个函数中。

因此，该语句只在函数被调用时执行。

这个调用发生在主体被加载之后。

此时，您的id="text"的<div>元素已经存在，因此getElementById能够找到它，并且c被正确定义。

当您将该语句移到全局作用域之外时，该语句在body被加载之前执行(在创建div之前)。

因此，document.getElementbyID("text")将找不到任何内容，c将被设置为undefined，因此没有任何用处。

相关文章：