Javascript适用于HTML文件，但不适用于Javascript文件

Question

我试图将计时器添加到我的代码中。 问题是代码在HTML内使用时工作正常，但是当我尝试在外部javascript文件中使用它时却无法正常工作。 帮帮我

我尝试使用内部HTML代码，它可以完美运行，但不能作为单独的Javascript文件使用

<div> Time :<span id ="timer"></span></div>
<script type="text/javascript">
    var timeoutHandle;
    function countdown(minutes, seconds) {
        function tick() {
            var counter = document.getElementById("timer");
            counter.innerHTML =
                minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
            seconds--;
            if (seconds >= 0) {
                timeoutHandle = setTimeout(tick, 1000);
            } else {
                if (minutes >= 1) {
                    // countdown(mins-1);   never reach “00″ issue solved:Contributed by Victor Streithorst
                    setTimeout(function () {
                        countdown(minutes - 1, 59);
                    }, 1000);
                }
            }
            if (seconds==0 && minutes ==0){

              alert("Game over");
              reset();
            }
        }
        tick();
    }

    countdown(1, 00);
</script>

这是HTML内部使用的代码。 但是当我尝试在外部Js文件中使用它时，它不起作用。

  <script src="game.js"></script>

以上是外部Js文件。 帮我解决这个问题

Answer 1

您的问题是脚本的加载位置。 在您的HTML页面上，它声明了timer元素后正在加载并运行。 当您将其移动到外部javascript文件时，它可能不是在等待该元素的创建和设置。 您应该将对倒计时的调用移至文档加载监听器中

Answer 2

将JS包装在window中window.onload = function() { }

 window.onload = function() { var timeoutHandle; function countdown(minutes, seconds) { function tick() { var counter = document.getElementById("timer"); counter.innerHTML = minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds); seconds--; if (seconds >= 0) { timeoutHandle = setTimeout(tick, 1000); } else { if (minutes >= 1) { // countdown(mins-1); never reach “00″ issue solved:Contributed by Victor Streithorst setTimeout(function () { countdown(minutes - 1, 59); }, 1000); } } if (seconds==0 && minutes ==0){ alert("Game over"); reset(); } } tick(); } countdown(1, 00); } 

  <div> Time :<span id="timer"></span></div> 

javascript代码在构建DOM之前已运行。 将其包装在window.onload函数中可确保其等待DOM构建