Replace one button with another when countdown timer ends

June 2, 2023

I have a simple countdown timer which is launched on the click of the .btn-submit-a button. I tried to make it so that after the timer ends, button A is replaced by button B (.btn-submit-b), but, unfortunately, nothing comes out. How can I achieve this? I will be glad for any help.

jQuery(function($){
  $('.btn-submit-a').on('click', doCount);
});

function doCount() {
var timeleft = 5;
var downloadTimer = setInterval(function(){
  if(timeleft <= 0){
    clearInterval(downloadTimer);
    document.getElementById("countdown").innerHTML = "Time is Up";
  } else {
    document.getElementById("countdown").innerHTML = timeleft + "<span class='remain'>seconds remain</span>";
  }
  timeleft -= 1;
}, 1000);
};

.btn-submit-b {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="submit" class="btn-submit-a">Button A</button>
<button type="submit" class="btn-submit-b">Button B</button>

<div id="countdown"></div>

>Solution :

You had a weird combination between jquery and native code. You can do that ofcourse but I would recommend to stick to either jQuery or native where possible. Therefore I changed some code to jQuery functions.

This said you can hide and show elements with the hide() and show() jQuery functions as you can see in the example below.

If you want to toggle them instead you can use toggle()

jQuery(function($) {
  $('.btn-submit-a').on('click', doCount);
});

function doCount() {
  var timeleft = 5;
  var downloadTimer = setInterval(function() {
    if (timeleft <= 0) {
      clearInterval(downloadTimer);
      $("#countdown").html("Time is Up");
      $('.btn-submit-a').hide();
      $('.btn-submit-b').show();
    } else {
      $("#countdown").html(timeleft + "<span class='remain'>seconds remain</span>");
    }
    timeleft -= 1;
  }, 1000);
};

.btn-submit-b {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="submit" class="btn-submit-a">Button A</button>
<button type="submit" class="btn-submit-b">Button B</button>

<div id="countdown"></div>