Question 180672 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Replace one button with another when countdown timer ends

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0 
    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";
    
    // Add these lines
    $(".btn-submit-a").hide();
    $(".btn-submit-b").show();
  } 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search