CODEWITHSUNDEEP
javascript
Alvaro Mejia
Alvaro Mejia

Reputation: 23

Create a simple 2 minutes countdown

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>

Upvotes: 0

Views: 1055

Answers (2)

Nicolas
Nicolas

Reputation: 8670

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>

Upvotes: 0

Jeremy Harris
Jeremy Harris

Reputation: 24559

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>

Upvotes: 3

Related Questions