Create a simple 2 minutes countdown

Question

I want to make a count of 2 minutes, but I want to give you click to the button "Start", so far, and managed to make it work, but I have an error in the minutes does not run as well back but that appears NaN:seconds.

I show them the code that i am working on.

var timeoutHandle;
function countdown(minutes) {
    var seconds = 60;
    var mins = minutes
    function tick() {
        var counter = document.getElementById("timer");
        var current_minutes = mins-1
        seconds--;
        counter.innerHTML =
        current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
        if( seconds > 0 ) {
            
            timeoutHandle=setTimeout(tick, 1000);
             
        } else {

            if(mins > 1){

               // countdown(mins-1);   never reach “00″ issue solved:Contributed by Victor Streithorst
               setTimeout(function () { countdown(mins - 1); }, 1000);
              

            }
             document.getElementById("timer").innerHTML = "Finished"
        }
    }
    tick();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="tempo-completo">
<div id="timer">2:00</div>
<button onclick="countdown()">INICIAR</button>
 </div>

NaN means Not a Number. You are trying to do some math on a string. — Lelio Faieta, Nov 18 '19 at 13:49
Your `countdown` function expects a number to be passed to it but the first time you call it there's no number: ``. — Jamie Dixon, Nov 18 '19 at 13:49
You can find a good answer on StackOverflow, but I think it's much useful if you use a debugger and inspect your code line by line. You'll learn why more than any solution that you can find here :) — Christian Vincenzo Traina, Nov 18 '19 at 13:50

score 3 · Answer 1 · answered Nov 18 '19 at 13:49

You are not passing in the number of minutes to the countdown() function.

var timeoutHandle;
function countdown(minutes) {
    var seconds = 60;
    var mins = minutes
    function tick() {
        var counter = document.getElementById("timer");
        var current_minutes = mins-1
        seconds--;
        counter.innerHTML =
        current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
        if( seconds > 0 ) {
            
            timeoutHandle=setTimeout(tick, 1000);
             
        } else {

            if(mins > 1){

               // countdown(mins-1);   never reach “00″ issue solved:Contributed by Victor Streithorst
               setTimeout(function () { countdown(mins - 1); }, 1000);
              

            }
             document.getElementById("timer").innerHTML = "Finished"
        }
    }
    tick();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="tempo-completo">
<div id="timer">2:00</div>
<button onclick="countdown(2)">INICIAR</button>
 </div>

Also, we can disable the button as soon as the timer starts so the user can't start a new timer — Femil Savaliya, Aug 24 '22 at 04:50

Nicolas · Answer 2 · 2019-11-18T14:07:35.493

Jeremy Harris' answer is working perfectly fine, but i would like to propose another one.
Don't use setTimeout to make an interval function, use setInterval. Using setTimeout with a recursive loop is overall less precise
With that in mind i've tweek your code to incorporate this idea.

var timeoutHandle;
function countdown(minutes) {
    var seconds = 60;
    var mins = minutes
    var counter = document.getElementById("timer");
    var current_minutes = mins-1
    // we create an interval variable to clear it later
    // we also use an arrow function to have access to variable
    // outside of the current function's scope.
    let interval = setInterval(() => {
      seconds--;
      counter.innerHTML =
      current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
      // our seconds have run out
      if(seconds <= 0) {
        // our minutes have run out
        if(current_minutes <= 0) {
          // we display the finished message and clear the interval so it stops.
          counter.innerHTML = "Finished"
          clearInterval(interval);
        } else {
          // otherwise, we decrement the number of minutes and change the seconds back to 60.
          current_minutes--;
          seconds = 60;
        }
      }
    // we set our interval to a second.
    }, 1000);
}

   
<div class="tempo-completo">
<div id="timer">2:00</div>
<button onclick="countdown(2)">INICIAR</button>
 </div>

Create a simple 2 minutes countdown

2 Answers2