Reputation: 163

How to Disable and Enable a button with Javascript

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.

Upvotes: 0

Answers (3)

George Cummins

Reputation: 28906

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

Upvotes: 1

tim_po

Reputation: 105

a quick google search reveals:

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

Upvotes: 0

unconditional

Reputation: 7656

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>

Upvotes: 1

How to Disable and Enable a button with Javascript

Answers (3)

Related Questions