Question

这是我的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");详细设置为全局时无法运行该程序。

Answer 1

它可以工作，但是在脚本运行并尝试查找元素的第二个示例中，它不存在，因为您既没有使用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>

它可以工作。

Answer 2

由于您只需要在代码运行时使用DOM元素，因此您也可以使用 DOMContentLoaded 事件并将代码保留在头部：

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

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

Answer 3

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

在您的第一个代码段中，c = document.getElementById（“text”）位于脚本中的函数中。

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

在加载正文后发生调用。

那时，您的<div>元素ID =“text”存在，因此getElementById能够找到它，并且c已正确定义。

当您将该语句移到全局范围外时，该语句在加载正文之前执行（在创建div之前）。

因此，document.getElementbyID（“text”）将找不到任何内容，c将被设置为undefined，因此没有用。

为什么不能设置`document.getElementById（＆＃34; text＆＃34;）; `是全球化的？

3 个答案: