javascript - How to replace "0:00" with "Collect" in timer button

Question

In the last days I had asked a question how to make a button that is disabled for 1 minute and when it is clickable again +25 points are added to a div. The problem is: When the timer is over it says "0:00". Is there a way to replace the "0:00" with "Collect"? I found similar questions on stackoverflow but they didn't help me.

Here is my code:

$('#btn').prop('disabled',true);
startCountDown();

function getCounter(){
  return  parseInt($('#counter').html());
}
function setCounter(count) {
  $('#counter').html(count);
}

$("#btn").click(function() {
  setCounter(getCounter()+25);
  $('#btn').prop('disabled',true);
  startCountDown();
});

function startCountDown() {
  var minutes = 0,
    seconds = 59;
  $("#countdown").html(minutes + ":" + seconds);
  var count = setInterval(function() {
    if (parseInt(minutes) < 0 || parseInt(seconds) <=0 ) {
      $("#countdown").html(minutes + ":" + seconds);
      clearInterval(count);
      $('#btn').prop('disabled',false);
    } else {
      $("#countdown").html(minutes + ":" + seconds);
      seconds--;
      if (seconds < 10) seconds = "0" + seconds;
    }
  }, 1000);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="counter">0</div>
<button id="btn">
<span id="countdown">0:00</span>
</button>

question from:https://stackoverflow.com/questions/65941762/how-to-replace-000-with-collect-in-timer-button

Answer 1

Hello GuciiBananaKing99,

I have found the solution to your problem. You need to add an if statement when seconds is 0. Then change $('#btn').html to "Collect".

Here is the full code:

function startCountDown() {
  var minutes = 0,
    seconds = 59;
  $("#countdown").html(minutes + ":" + seconds);
  var count = setInterval(function() {
    if (parseInt(minutes) < 0 || parseInt(seconds) <=0 ) {
      $("#countdown").html(minutes + ":" + seconds);
      clearInterval(count);
      $('#btn').prop('enabled',false);
    } else {
      $("#countdown").html(minutes + ":" + seconds);
      seconds--;
      if (seconds < 10) {seconds = "0" + seconds;}
      if (seconds == 0) { // Check if seconds is 0
          $('#btn').html("Collect"); // Change Btn's HTML to Collect
         
      });
    }
  }, 1000);
}