CODEWITHSUNDEEP
javascript
Wouter
Wouter

Reputation: 67

Countdown js, keeps restarting

I'm learing so please be kind :-)

I found the perfect countdown clock. What I want to achieve is that after 1 the words Lift Off! come, but for some reason the countdown clock keeps showing 1

var startNum;
var currentNum;

function addClassDelayed(jqObj, c, to) {    
    setTimeout(function() { jqObj.addClass(c); }, to);
}

function anim() { 
  addClassDelayed($("#countdown"), "puffer", 600);
  if (currentNum == 0)  $('#countdown').html("Lift Off!"); else currentNum--;
  $('#countdown').html(currentNum+1);
  $('#countdown').removeClass("puffer");
}

$(function() {
  startNum = 5; 
  currentNum = startNum;
  $("#countdown").html(currentNum); // init first time based on n
  self.setInterval(function(){anim()},1325);

});

Upvotes: 1

Views: 62

Answers (3)

Chris Forrence
Chris Forrence

Reputation: 10084

Let's look in your anim function:

function anim() { 
  addClassDelayed($("#countdown"), "puffer", 600);
  if (currentNum == 0)  $('#countdown').html("Lift Off!"); else currentNum--;
  $('#countdown').html(currentNum+1);
  $('#countdown').removeClass("puffer");
}

If braces are missing after an if-statement, they're implied to only apply to the following statement (singular). Based on that, let's add braces around the parts of the code where they're implied to be:

function anim() { 
  addClassDelayed($("#countdown"), "puffer", 600);
  if (currentNum == 0) {
    $('#countdown').html("Lift Off!");
  } else {
    currentNum--;
  }
  $('#countdown').html(currentNum+1);
  $('#countdown').removeClass("puffer");
}

Based on that, when the currentNum is 0, the contents of #countdown become "Lift Off!" then immediately change to currentNum + 1. That's why it's never finishing off by showing "Lift Off!"

This code will either print "Lift Off!" or the current number (which then gets decremented after getting referenced):

var startNum;
var currentNum;
var countdownInterval;

function addClassDelayed(jqObj, c, to) {    
    setTimeout(function() { jqObj.addClass(c); }, to);
}

function anim() { 
  addClassDelayed($("#countdown"), "puffer", 600);
  if (currentNum === 0) {
    $('#countdown').html('Lift Off!');
    clearInterval(countdownInterval);
  } else {
    $('#countdown').html(currentNum--);
  }
  $('#countdown').removeClass("puffer");
}

$(function() {
  startNum = 5; 
  currentNum = startNum;
  $("#countdown").html(currentNum); // init first time based on n
  countdownInterval = self.setInterval(function(){anim()},1325);
});

Upvotes: 2

Clint
Clint

Reputation: 2793

$('#countdown').html(currentNum+1); overwrites anything you would have set previously.

function anim() { 
  addClassDelayed($("#countdown"), "puffer", 600);
  if (currentNum == 0) {
      $('#countdown').html("Lift Off!");
      clearInterval(token)
  } else {
      currentNum--;
      $('#countdown').html(currentNum+1); // Only show if not "Lift Off!"
  }
  $('#countdown').removeClass("puffer");
}

var token;
$(function() {
  startNum = 5; 
  currentNum = startNum;
  $("#countdown").html(currentNum); // init first time based on n
  token = self.setInterval(function(){anim()},1325);
});

Added clearInverval per Tyler's suggestion

Upvotes: 2

Mike
Mike

Reputation: 3940

You have a bug in your code. You overwrite Lift off! after the if else statements.

function anim() { 
  addClassDelayed($("#countdown"), "puffer", 600);

  // Add a return statement here.
  if (currentNum == 0) {
      $('#countdown').html("Lift Off!");
      return;
  }

  else {
     currentNum--;
  }
  $('#countdown').html(currentNum+1);
  $('#countdown').removeClass("puffer");
}

Upvotes: 1

Related Questions