Javascript works in HTML file but not in Javascript file

Question

I tried to add the timer to my code. The problem is the code works perfectly fine when used inside HTML, but when i tried to use it in an external javascript file it is not working. Help me out

I tried using inside HTML code , it works perfect, But not in as a seperate Javascript file

<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>

this is the code used inside HTML. but when i tried using it in the external Js file, it is not working.

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

the above is the external Js file. Help me out with this problem

@ControlAltDel i removed the script tags while moving the code to external JS file — user11922186
– user11922186, Commented Aug 14, 2019 at 14:10
@ControlAltDel could you show me how to do it with onload listener..... — user11922186
– user11922186, Commented Aug 14, 2019 at 14:31
could you show us the html after having modified the tag please — jonatjano
– jonatjano, Commented Aug 14, 2019 at 14:39

Charlene Vas · Accepted Answer · 2019-08-14 14:47:35Z

Wrap the JS in the 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>

The javascript code was running before the DOM was constructed. Wrapping it in the window.onload function makes sure it waits for DOM construction

ControlAltDel · Accepted Answer · 2019-08-14 14:09:47Z

-1

Your problem is where your script is loading. On your HTML page, it is loading and running after you've declared your timer element. When you moved this to an external javascript file, it probably isn't waiting for the element to be created and set up. You should move the call to countdown into a document onload listener

answered Aug 14, 2019 at 14:09

ControlAltDel

35.2k10 gold badges60 silver badges86 bronze badges

2 Comments

jonatjano Over a year ago

you can also add the defer attribute to the tag if your target is not opera mini or younger than 2013

Ares Li Over a year ago

What error message did you get when it is not working?

Collectives™ on Stack Overflow

Javascript works in HTML file but not in Javascript file

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related