How to disable button once countdown date has expired-CodePudding

Please, how do I make HTML form button disable when countdown date expires, I was able to create a count-down date, but I don't really know how to disable the button once the count-down displays "expired".

// The output of the count-down date
<div  id="demo"></div>

//html form button
<form>
<input type="text" placeholder="your full name">
<button>Join</button>
</form>

// count down JavaScript
<script>
// Set the date we're counting down to
var countDownDate = new Date("Nov 22, 2022 11:34:38")  .getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();
    
  // Find the distance between now and the count down date
  var distance = countDownDate - now;
    
  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML = days   " days remaining" ;
    
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

CodePudding user response：

You need to set the disabled attribute to "true". Can you try with the example below?

  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
    document.querySelector('#button').disabled = true;
  }

https://www.w3schools.com/tags/att_button_disabled.asp

CodePudding user response：

You can add a line in Jquery or Javascript whatever you want:

// in JQuery
if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
    $("#button").attr("disabled", true);
}

// in JS
if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
    document.getElementById(BUTTON_ID).disabled = true;
}