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