My JavaScript timer doesn't work

Question

Im trying to create a small JavaScript timer in which a user has a limited amount of time to answer a question, and if the user does not answer in time, they will be directed back to the main page. All I get back from my code in terms of the timer is literally " [ ] ".

My code:

    <DOCTYPE! html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="style_q1.css">

<script type="text/javascript">

var time="60";
var min="0";
var sec="0";

function startTimer() {
      min=parseInt(timer/60);
      sec=parseInt(timer%60);

      if(timer<1){

        window.location="index.html";

      }

      document.getElementById("time").innerHTML = "<b> Time Left: </b>"+min.toString()+":"+sec.toString();
      timer--;
      setTimeout(function(){
      startTimer();
      }, 1000) ;
}

</script>


</head>

<body onload="startTimer();">

  <div id="top">


  </div>


  <div id="logo">

<h1 style="color:white;"> Question 1 -  Geography </h1>

  </div>

  <div id="game_area">

 <center>  <h2> What is the capital of Ireland? </h2> </center>



  </div>


  <div id="time">

      <center> <b>[<span id="time" ></span></b>]</center>

  </div>

  </body>

  </html>

Why do you have 2 body tags?

Blue
– Blue

2018-01-17 18:54:35 +00:00
Commented Jan 17, 2018 at 18:54 — Blue
– Blue, Commented Jan 17, 2018 at 18:54
You don't define timer anywhere.

Blue
– Blue

2018-01-17 18:55:42 +00:00
Commented Jan 17, 2018 at 18:55 — Blue
– Blue, Commented Jan 17, 2018 at 18:55
I fixed the body FrankerZ

Alex Jimborean
– Alex Jimborean

2018-01-17 18:57:47 +00:00
Commented Jan 17, 2018 at 18:57 — Alex Jimborean
– Alex Jimborean, Commented Jan 17, 2018 at 18:57

Ele · Accepted Answer · 2018-01-17 19:40:40Z

1

Just use setInterval(), it's pretty much designed for this:

UPDATE: Remember to stop the setinterval process when the time is up. Use this method clearInterval() to stop the process.

var secondsLeft = 60;

function startTimer() {
      var min=parseInt(secondsLeft/60);
      var sec=parseInt(secondsLeft%60);

      if(secondsLeft<1){
        alert('timer expired');

        //window.location="index.html";

      }

      document.getElementById("time").innerHTML = "<b> Time Left: </b>"+min.toString()+":"+sec.toString();
      secondsLeft--;
}

setInterval(startTimer, 1000);

<DOCTYPE! html>

<html>

<head>
<link rel="stylesheet" type="text/css" href="style_q1.css">
</head>

<body onload="startTimer();">

  <div id="top">


  </div>


  <div id="logo">

    <h1 style="color:white;"> Question 1 -  Geography </h1>

  </div>

  <div id="game_area">

 <center>  <h2> What is the capital of Ireland? </h2> </center>



  </div>
  <div id="time">

      <center> <b>[<span id="time" ></span></b>]</center>

  </div>

  </body>

  </html>

edited Jan 17, 2018 at 19:40

Ele

33.8k7 gold badges43 silver badges80 bronze badges

answered Jan 17, 2018 at 18:59

Blue

23k7 gold badges69 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ele Over a year ago

I think would be nice to mention that OP will need to stop the setInterval process using the method clearInterval.

Blue Over a year ago

Well, he wrote window.location = 'blah', so that timer is going to be done as soon as the page redirects.

Ele Over a year ago

Yes, but it's important to mention for future users using the same scenario with SPA. Of course, if you want :-)

David Shack · Accepted Answer · 2018-01-17 19:09:08Z

A few things to note:

<!DOCTYPE> instead of <DOCTYPE!>
id attributes should be unique, you have two declared
<center> is deprecated. Find a solution using CSS.

Rather than adding an onload attribute to your <body> I would suggest adding an DOMContentLoaded event listener to your document.

<link rel="stylesheet" type="text/css" href="style_q1.css">

<script type="text/javascript">

    function startTimer() {
        min = parseInt(timer / 60);
        sec = parseInt(timer % 60);

        if (timer < 1) {
            window.location = "index.html";
        }

        document.getElementById("time").innerHTML = "<b> Time Left: </b>" + min.toString() + ":" + sec.toString();
        timer--;
        setTimeout(function () {
            startTimer();
        }, 1000);
    }

    var timer = 60,
        min = 0,
        sec = 0;

    document.addEventListener('DOMContentLoaded', function () {
        startTimer();
    });
</script>

Question 1 - Geography

What is the capital of Ireland?

[]

Prakash Naidu · Accepted Answer · 2018-01-17 19:00:35Z

spelling mistake

rename time to timer

<html>

<head>

<link rel="stylesheet" type="text/css" href="style_q1.css">

<script type="text/javascript">

var timer="60";
var min="0";
var sec="0";


function startTimer() {
      min=parseInt(timer/60);
      sec=parseInt(timer%60);

      if(timer<1){

        window.location="index.html";

      }

      document.getElementById("time").innerHTML = "<b> Time Left: </b>"+min.toString()+":"+sec.toString();
      timer--;
      setTimeout(function(){
      startTimer();
      }, 1000) ;
}

</script>


</head>

<body onload="startTimer();">

  <div id="top">


  </div>


  <div id="logo">

<h1 style="color:white;"> Question 1 -  Geography </h1>

  </div>

  <div id="game_area">

 <center>  <h2> What is the capital of Ireland? </h2> </center>



  </div>
  <body onload="startTimer();">

  <div id="time">

      <center> <b>[<span id="time" ></span></b>]</center>

  </div>

  </body>

  </html>

Ele · Accepted Answer · 2018-01-17 19:27:23Z

Your code has an error with the variable time
You can use setInterval to accomplish your scenario.
Remember to stop the setinterval process when the time is up.

var timer = 10;
var min = 0;
var sec = 0;
var refreshIntervalId;

function startTimer() {
      min=parseInt(timer / 60);
      sec=parseInt(timer % 60);

      if (timer < 1) {
        //window.location="index.html";
        console.log("Time is up!");
        
        clearInterval(refreshIntervalId);
        
        return;
      }

      document.getElementById("time").innerHTML = "<b> Time Left: </b>" + min + ":" + sec;
      
      timer--;
}

var refreshIntervalId = setInterval(startTimer, 1000);

<div id="top">
  </div>
  <div id="logo">
<h1 style="color:white;"> Question 1 -  Geography </h1>
  </div>
  <div id="game_area">
 <center>  <h2> What is the capital of Ireland? </h2> </center>
  </div>
  <div id="time">
  <center> <b>[<span id="time" ></span></b>]</center>
</div>

Hope it helps!

Collectives™ on Stack Overflow

My JavaScript timer doesn't work

4 Answers 4

3 Comments

What is the capital of Ireland?

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

What is the capital of Ireland?

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related