I have a button its disabled and i want to put a counter inside it, what i want to do is when the counter reaches zero it get enabled, how can i do that? in the code below the counter doesn't appear inside the button and i don't want the reset button i just want the button to be enabled when it reaches zero, here is what i have tried so far:

function Countdown()
{
    this.start_time = "00:30";
    this.target_id = "#timer";
    this.name = "timer";
    this.reset_btn = "#reset";
}

Countdown.prototype.init = function()
{
this.reset();
setInterval(this.name + '.tick()',1000)
}

Countdown.prototype.reset = function()
{
    $(this.reset_btn).hide();
    time = this.start_time.split(":");
    //this.minutes = parseInt(time[0]);
    this.seconds = parseInt(time[1]);
    this.update_target();
}

Countdown.prototype.tick = function()
{
    if(this.seconds > 0) //|| this.minutes > 0)
    {
        if(this.seconds == 0)
        {
           // this.minutes = this.minutes - 1;
            this.seconds = 59
        } else {
        this.seconds = this.seconds - 1;
        }
    }
    this.update_target()
}

Countdown.prototype.update_target = function()
{
    seconds = this.seconds;
    if (seconds == 0) $(this.reset_btn).show();
    else if(seconds < 10) seconds = "0" + seconds;
    $(this.target_id).val(this.seconds)
}

timer = new Countdown();
timer.init();

$(document).ready(function(){
    $("#reset").click(function(){
        //timer = new Countdown();  
        timer.reset();
    });
});

.hidden {
    display: none;
}

<script src=".3.1/jquery.min.js"></script>
<button type="text" id="timer" disabled>Counter should be inside me, and enable me when it reaches 0</button>
         <button id="reset">Reset</button>

I have a button its disabled and i want to put a counter inside it, what i want to do is when the counter reaches zero it get enabled, how can i do that? in the code below the counter doesn't appear inside the button and i don't want the reset button i just want the button to be enabled when it reaches zero, here is what i have tried so far:

function Countdown()
{
    this.start_time = "00:30";
    this.target_id = "#timer";
    this.name = "timer";
    this.reset_btn = "#reset";
}

Countdown.prototype.init = function()
{
this.reset();
setInterval(this.name + '.tick()',1000)
}

Countdown.prototype.reset = function()
{
    $(this.reset_btn).hide();
    time = this.start_time.split(":");
    //this.minutes = parseInt(time[0]);
    this.seconds = parseInt(time[1]);
    this.update_target();
}

Countdown.prototype.tick = function()
{
    if(this.seconds > 0) //|| this.minutes > 0)
    {
        if(this.seconds == 0)
        {
           // this.minutes = this.minutes - 1;
            this.seconds = 59
        } else {
        this.seconds = this.seconds - 1;
        }
    }
    this.update_target()
}

Countdown.prototype.update_target = function()
{
    seconds = this.seconds;
    if (seconds == 0) $(this.reset_btn).show();
    else if(seconds < 10) seconds = "0" + seconds;
    $(this.target_id).val(this.seconds)
}

timer = new Countdown();
timer.init();

$(document).ready(function(){
    $("#reset").click(function(){
        //timer = new Countdown();  
        timer.reset();
    });
});

.hidden {
    display: none;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="text" id="timer" disabled>Counter should be inside me, and enable me when it reaches 0</button>
         <button id="reset">Reset</button>

• javascript
• button
• counter

Share Improve this question Follow edited May 6, 2022 at 17:41 Scott Marcus 65.9k66 gold badges5454 silver badges8080 bronze badges asked May 28, 2017 at 18:53 stephjhonnystephjhonny 22533 gold badges1111 silver badges2222 bronze badges 1

• Why did you include jQuery if you're not using it and didn't tag your question with it? – j08691 Commented May 28, 2017 at 18:57

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

This is much simpler than what you've got. Just use window.setTimeout().

Keep in mind that tracking time to a high precision is not super reliable in a browser. You may want to look at moment.js or use performance.now() for an easier API to handle that.

// Get refreence to span and button
var spn = document.getElementById("count");
var btn = document.getElementById("btnCounter");

var count = 5;     // Set count
var timer = null;  // For referencing the timer

(function countDown(){
  // Display counter and start counting down
  spn.textContent = count;
  
  // Run the function again every second if the count is not zero
  if(count !== 0){
    timer = setTimeout(countDown, 1000);
    count--; // decrease the timer
  } else {
    // Enable the button
    btn.removeAttribute("disabled");
  }
}());

<button id="btnCounter" disabled>Time left: <span id="count"></span></button>