Click the button only when the time is zero in Jquery html?

Question

I use the following link codes, it works well, but I want the button to be clicked only once when the time is zero?

Enabling Button after certain time frame in Jquery html?

I changed the code as follows but it did not work?

function enableButton() {
  var timer2 = "00:05";

  var interval = setInterval(function() {
    var timer = timer2.split(':');
    //by parsing integer, I avoid all extra string processing
    var minutes = parseInt(timer[0], 10);
    var seconds = parseInt(timer[1], 10);
    --seconds;
    minutes = (seconds < 0) ? --minutes : minutes;
    if (minutes < 0) clearInterval(interval);
    seconds = (seconds < 0) ? 59 : seconds;
    //minutes = (minutes < 10) ?  minutes : minutes;
    $('.countdown').html(minutes + ':' + seconds);
    timer2 = minutes + ':' + seconds;
    if (minutes == 0 && seconds == 0) {
      clearInterval(interval);

      document.getElementById('Send_Active').addEventListener('click', function() {
        enableButton();
        alert('ok');
      });
    } else {
      //document.getElementById('Send_Active').setAttribute('hidden', true);                
    }

  }, 1000);
}
enableButton();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <div id="countdown" class="countdown"></div>
</div>
<div class="form-group">
  <a id="Send_Active">send again</a>
</div>

I think you mean that multiple click handlers accumulate and fire an increasing number of times. If so, see [addEventListener firing multiple times after recursion](https://stackoverflow.com/questions/61671825/addeventlistener-firing-multiple-times-after-recursion). Also see [How to remove an event listener in javascript](https://stackoverflow.com/questions/15100576/how-to-remove-an-event-listener-in-javascript). — showdev, Oct 17 '21 at 05:20
@showdev I want click on the button When time was zero and display the alert ... just it...My code works even when the time is not zero — sunboy_sunboy, Oct 17 '21 at 05:38
It seems to work for me. However, there is nothing in your code to turn the button off again, so it will continue to work after the first timer hits zero. Further, the handlers will accumulate and start firing multiple times. Please see my first comment. — showdev, Oct 17 '21 at 05:51
@showdev When the time is not zero, the alert will be displayed again — sunboy_sunboy, Oct 17 '21 at 05:52
Yes, because you never remove the click handler. Once you add it, it fires on every click. — showdev, Oct 17 '21 at 05:53
@showdev Can you change the code? I do not know exactly what to do? — sunboy_sunboy, Oct 17 '21 at 05:54
Sorry, I'm just not sure what you want it to do or why you changed the [example](https://stackoverflow.com/a/62243402/924299). Instead of adding more handlers, I would add the handler once and use the `disabled` attribute to turn it on and off, like in that [other post](https://stackoverflow.com/a/62243402/924299). — showdev, Oct 17 '21 at 06:01
@showdev Because this method can be changed through the inspect element and causes sabotage — sunboy_sunboy, Oct 17 '21 at 06:04

score 1 · Accepted Answer · answered Oct 17 '21 at 06:15

You can use removeEventListener() to remove the listener you added.

const btnSendActive = document.getElementById('Send_Active');

function buttonClicked() {
  btnSendActive.removeEventListener('click', buttonClicked);
  enableButton();
  alert('ok');
}

function enableButton() {

  var timer2 = "00:03";

  var interval = setInterval(function() {
    var timer = timer2.split(':');
    var minutes = parseInt(timer[0], 10);
    var seconds = parseInt(timer[1], 10);

    --seconds;
    minutes = (seconds < 0) ? --minutes : minutes;
    if (minutes < 0) clearInterval(interval);
    seconds = (seconds < 0) ? 59 : seconds;

    $('.countdown').html(minutes + ':' + seconds);
    timer2 = minutes + ':' + seconds;
    if (minutes == 0 && seconds == 0) {
      clearInterval(interval);
      btnSendActive.addEventListener('click', buttonClicked);
    }
  }, 1000);

}

enableButton();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <div id="countdown" class="countdown"></div>
</div>
<div class="form-group">
  <a id="Send_Active">send again</a>
</div>

Click the button only when the time is zero in Jquery html?

1 Answers1