disabled button after timer expired

Question

I am using <button> not <input type="button"> , I think there is big difference for that right?

I just want that if the countdown is Expired the <button> will disable too, I don't know if my logic is correct for disabling the button but my countdown works like a charm

I have this script inside of my html

<button  class="main-btn main-btn-2" id="invite"> <a  href="{% url 'add' %}?parent_ID={{ me.id }}"  rel="nofollow">Invite Now</a></button>

{% for timer in countdown %}
<script>
var countDownDate = new Date("{{timer.enddate}}").getTime();

var x = setInterval(function() {


  var now = new Date()

  var distance = countDownDate - now;

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

  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
    document.getElementById("invite").disabled = true; // this is my logic if the timer expired the button will disabled
  }
}, 1000);
</script>
{% endfor %}

Does this answer your question? [Disabling and enabling a html input button](https://stackoverflow.com/questions/13831601/disabling-and-enabling-a-html-input-button) — Sudarshan Rai, Mar 10 '20 at 04:12
Why do you have link inside button? How about invoking javascript on click of buttton? — CuriousMind, Mar 10 '20 at 04:26

score 1 · Accepted Answer · answered Mar 10 '20 at 04:37

try this

<a  href="{% url 'add' %}?parent_ID={{ me.id }}" style="color:white;"  rel="nofollow" ><input type="button" id="invite" value="Invite Now!" class="main-btn main-btn-2"></a>
{% for n in ako %}
<script>
var countDownDate = new Date("{{n.enddate}}").getTime();
var x = setInterval(function() {

  var now = new Date()


  var distance = countDownDate - now;

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

  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
    document.getElementById("invite").disabled = true;
  }
}, 1000);
</script>
{% endfor %}

I think I need to read html tag first :) thanks for this. it works! — , Mar 10 '20 at 04:39

disabled button after timer expired

1 Answers1