How to Disable and Enable a button with Javascript

Question

So I have been creating a timer in javascript. It counts down from five minutes and changes colors on certain intervals of time. I have created buttons that start the time, stop the time, and reset the time. However, I noticed that when I click the "start" button multiple times it increases the amount of time that is subtracted. So one press = "-1", 2 press = "-2", 3 press = "-3", etc. I am looking to disable the button after clicking it. I have figured out how to disable it but once it is disabled I need to enable it again after clicking the "reset" button.

So when someone initially presses "Start" the button is disabled. When the user presses "Reset" the "Start" button is enabled again. Basically just need to figure out how to reset it back to the original function.

Here is my Javascript code:

var seconds = 300;
var countdownTimer;
var colorChange;
colorChange = ['#7ed473', '#fff194', '#fa8283']
function secondPassed(){
	var minutes = Math.floor(seconds/60);
	var remainingSeconds = seconds % 60;
	if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds;  
    }
    document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
   if (seconds == 0) {
		clearInterval(countdownTimer);
		}
}

function changeColor(){
	if (seconds <= 300 && seconds > 90) {
		document.body.style.background = colorChange[0];
	}
	else if (seconds <= 90 && seconds > 30) {
		document.body.style.background = colorChange[1];
	}
	else if(seconds <= 30 && seconds >= 0){
	document.body.style.background = colorChange[2];
	}
}
	
function countdown(start){
	secondPassed();
	if (seconds != 0) {
	seconds --;
	countdownTimer = setTimeout('countdown()', 1000);
	changeColor();
	start.disabled = true;

	}
}

function cdpause() {
        // pauses countdown
        clearTimeout(countdownTimer);
};
    
function cdreset(startButton) {
        // resets countdown
        cdpause();
        secondPassed();
};

#countdown {
font-size: 2em;
}

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="newTicket2.0.css">
<script src = "Timer2.js">
</script>
</head>

<body onload = "cdreset()">
<span id="countdown" class="timer"></span>

<input type="button" value="Start" onclick="countdown(this)">
<input type="button" value="Stop" onclick="cdpause()">
<input type="button" value="Reset" onclick="cdreset(seconds = 300)">
</body>
</html>

I have tried adding a start.disabled = false to the cdreset() function in hopes that it would just reset the button. But that did not work. Tried putting the countdown(start); into the cdreset() and that did not work either. Basically hit a wall. It cant be this hard to reset everything. Lol. Any help or guidance would be greatly appreciated.

Remove the disabled attribute $('#start').removeAttr('disabled'); — Jonathan Anctil
– Jonathan Anctil, Commented May 15, 2015 at 18:59

George Cummins · Accepted Answer · 2015-05-15 19:05:06Z

1

cdreset() does not know where to find the start button. To fix that problem, make two minor changes.

First, add an ID to your start button:

<input type="button" value="Start" onclick="countdown(this)" id="start">

Then modify cdreset() to use that ID when it enables the button:

function cdreset(startButton) {
    // resets countdown
    cdpause();
    secondPassed();
    document.getElementById('start').disabled = false;
};

Example fiddle

edited May 15, 2015 at 19:05

answered May 15, 2015 at 18:56

George Cummins

29k8 gold badges74 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

zombie dude 789 Over a year ago

Wow...well that was incredibly easy. lol. I appreciate the help.

unconditional · Accepted Answer · 2015-05-15 18:55:49Z

You could assign IDs to your buttons and use getElementById() to access them:

var seconds = 300;
var countdownTimer;
var colorChange;
colorChange = ['#7ed473', '#fff194', '#fa8283'];

function secondPassed(){
	var minutes = Math.floor(seconds/60);
	var remainingSeconds = seconds % 60;
	if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds;  
    }
    document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
   if (seconds == 0) {
		clearInterval(countdownTimer);
}
}

function changeColor(){
	if (seconds <= 300 && seconds > 90) {
		document.body.style.background = colorChange[0];
	}
	else if (seconds <= 90 && seconds > 30) {
		document.body.style.background = colorChange[1];
	}
	else if(seconds <= 30 && seconds >= 0){
	document.body.style.background = colorChange[2];
	}
}
	
function countdown(start){
	secondPassed();
	if (seconds > 0) {
	    seconds --;
	    countdownTimer = setTimeout('countdown()', 1000);
	    changeColor();
	    start.disabled = true;
	} else {
        clearTimeout(countdownTimer);
    }
}

function cdpause() {
        // pauses countdown
        clearTimeout(countdownTimer);
}
    
function cdreset() {
        // resets countdown
        cdpause();
        secondPassed();
        document.getElementById("start").disabled = false;
}

#countdown {
font-size: 2em;
}

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="newTicket2.0.css">
<script src = "Timer2.js">
</script>
</head>

<body onload = "cdreset()">
<span id="countdown" class="timer"></span>

<input type="button" id="start" value="Start" onclick="countdown(this)">
<input type="button" id="stop" value="Stop" onclick="cdpause()">
<input type="button" id="reset" value="Reset" onclick="cdreset(seconds = 300)">
</body>
</html>

Thanks a bunch dude, this really helped didn't realize that it was this easy. lol

tim_po · Accepted Answer · 2015-05-15 18:57:40Z

0

a quick google search reveals:

document.getElementById("myBtn").disabled = true;

answered May 15, 2015 at 18:57

tim_po

1051 silver badge10 bronze badges

2 Comments

zombie dude 789 Over a year ago

right on, im terrible at searchng for things like this on google. Ive been looking around for a hot minute, I appreciate it though.

tim_po Over a year ago

no problem mate,i dont mind people searching "obvious" things im not going to send 3million people to downvote you and get you banned like most people do here on SO

Collectives™ on Stack Overflow

How to Disable and Enable a button with Javascript

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related