為什么不能設置`document.getElementById（“ text”）; `要全球化？

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");時無法運行該程序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”）位於腳本的函數中。

因此，該語句僅在調用函數時執行。

該調用發生在加載身體之后。

那時，您的具有id =“ text”的<div>元素存在，因此getElementById可以找到它，並且c正確定義。

但是，當您將該語句移到全局范圍之外時，該語句在加載正文之前（在創建div之前）執行。

結果，document.getElementbyID（“ text”）將找不到任何內容，c將被設置為undefined，因此沒有用。

為什么不能設置`document.getElementById（“ text”）; `要全球化？

問題描述

3 個解決方案

解決方案1
3 已采納 2016-10-02 09:02:51

解決方案2
1 2016-10-02 09:14:46

解決方案3
1 2016-10-02 09:24:15

為什么不能設置`document.getElementById（“ text”）; `要全球化？

問題描述

3 個解決方案

解決方案1 3 已采納 2016-10-02 09:02:51

解決方案2 1 2016-10-02 09:14:46

解決方案3 1 2016-10-02 09:24:15

解決方案1
3 已采納 2016-10-02 09:02:51

解決方案2
1 2016-10-02 09:14:46

解決方案3
1 2016-10-02 09:24:15