Question 417887 in Javascript Question posted in
A very good W3school tutorial can be found here.

How do I make a countdown timer using JavaScript in CodeHS?

I’m trying to make a game using a website called CodeHS, and it needs a time limit. I’m trying to achieve this through graphic text on a canvas that counts down from 2 minutes, but it isn’t working. I’m a new coder, just started in August, so my coding is likely not the most efficient, but my knowledge of JavaScript is limited. Can someone help?

This is what my code looks like:

const CENTER_X = getWidth() / 2;
const TIMER_MINUTES = 2;
const TIMER_SECONDS = 0;
function timer(){
    var timerMinutes = TIMER_MINUTES;
    var timerSeconds = TIMER_SECONDS;
    var timer = new Text(timerMinutes + ":0" + timerSeconds, "17pt Arial");
    timer.setPosition(CENTER_X - 21, 18);
    timer.setColor(Color.white);
    add(timer);
    while(true){
        if(timerSeconds == 0){
            if(timerMinutes == 0){
                  setTimeout(function() { timer.setText("0:00") }, 1000);
//                gameOver();
                break;
            }
            timerMinutes -= 1;
            timerSeconds += 59;
        }else{
            timerSeconds -= 1;
        }
        if(timerSeconds < 10){
            setTimeout(function() { timer.setText(timerMinutes + ":0" + timerSeconds) }, 1000);
        }else{
            setTimeout(function() { timer.setText(timerMinutes + ":" + timerSeconds) }, 1000);
        }
    }
}

When I run the code, the text "2:00" successfully pops up, but then a second later it changes to "0:00" without counting down. For clarification, I’ve turned gameOver(); into a comment because the function in my code is not relevant to how the timer’s code should run.

Tags:

2

Answers


  1. 0

    Your problem is that the statements in the while() loop do not wait for any of the timeouts, they just decrement the minutes and seconds as fast as they can.

    So remove the while() and break statements. Move the variables outside the function so they keep their values between function calls.
    Change the name of your string variable so that is not the same as the function name.

    I ran this successfully on the codehs website.

    const CENTER_X = getWidth() / 2;
const TIMER_MINUTES = 2;
const TIMER_SECONDS = 0;

let timerMinutes = TIMER_MINUTES;
let timerSeconds = TIMER_SECONDS;
let timerStr = "";


// Start the timer 
timer()

function timer(){
  timerStr.setPosition(CENTER_X - 21, 18);
  timerStr.setColor(Color.white);
  add(timerStr);
  
  if(timerSeconds == 0){
    console.log( timerMinutes )
    if(timerMinutes == 0){
      //   setTimeout(function() { timer.setText("0:00") }, 1000);
      timerStr.setText("0:00");
      console.log( timerStr.label );
      console.log( "gameOver" );
      //                gameOver();
    }
    timerMinutes -= 1;
    timerSeconds += 59;
  }else{
    timerSeconds -= 1;
  }
  
  if(timerSeconds < 10){
    setTimeout(function() { timerStr.setText(timerMinutes + ":0" + timerSeconds); timer();  }, 1000);
  }else{
    setTimeout(function() { timerStr.setText(timerMinutes + ":" + timerSeconds); timer(); }, 1000);
  }
  
  console.log( timerStr.label );
}
    Login or Signup to reply.
  2. 0

    You can use countdown.js JavaScript file. I implemented this library to create countdown timer so easy and fast. You can get it from this link on my github.

    <html>

<head>
<script src="countdown.js"></script>
</head>

<body>

<div id="idz"></div>
<div id="idz2"></div>
<div id="idz3"></div>

<script>

const t1 = new tinyCountDown("d-h-m-s","0-0-0-38","timerTick1();","timer1End();",500);
t1.timerInit();
const t2 = new tinyCountDown("sec",5,"timerTick2();","timer2End();",1000);
t2.timerInit();
const t3 = new tinyCountDown("sec",8,"timerTick3();");
t3.timerInit();

function timer1End(){alert("timer 1 is over");}
function timer2End(){alert("timer 2 is over");}
function timerTick1(){document.querySelector("#idz").innerHTML=t1.timerGetString();}
function timerTick2(){document.querySelector("#idz2").innerHTML=t2.timerGetString();}
function timerTick3(){document.querySelector("#idz3").innerHTML=t3.timerGetString();}

</script>

</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search