Q:

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

Here is my 60 seconds counttime code,it operates successfully.
<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>

Here var start=Date.now() to make start a global variable,why var c=document.getElementById("text"); can't be written below the line var start=Date.now(); to make variable c as global var?
<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>

Please to explain why the program cannot be run when to set document.getElementById("text");  as global in detail.

A:

It would work, but in your second example at the time the script runs and tries to find the element, it isn't there because you neither used window.onload nor did you put your script below the html. Don't put javascript in the head. Rearange the code to
<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>

and it'l work.

