Pause Button for Countdown Timer?
Hi-
I'm new to JavaScript and am trying to create/add a Pause button to a countdown timer. As I understand it, I think I first need to create a button and then create/write a corresponding function for that button. Unfortunately, the Pause button does not display on the html page. Suggestions on what I'm doing wrong? Thanks.
Here's the JS code I've written to create the button (*Note: if it's helpful, I've also appended the full html and js files):
Code:
var pauseButton = document.createElement("input");
pauseButton.setAttribute("type", "button");
pauseButton.setAttribute("value", "Pause");
pauseButton.onclick = function () {
pauseCountdown();
}
And here's the JS code I've written to create the function:
Code:
function pauseCountdown() {
// pause timer
var clearIntervalHandle;
}
HTML Code:
<head>
<title>Countdown</title>
<style type="text/css">
body {
font-family: sans-serif;
color: #333;
}
#container {
width: 400px;
margin: auto;
}
h1 { font-size: 5em; }
</style>
</head>
<body>
<div id="container">
<div id="inputArea">
</div>
<h1 id="time">0:00</h1>
</div>
<script src="script.js"></script>
</body>
Code:
// two global variables
var secondsRemaining;
var intervalHandle;
function resetPage() {
document.getElementById("inputArea").style.display = "block";
}
function tick() {
// grab the h1
var timeDisplay = document.getElementById("time");
// turn seconds into mm:ss
var min = Math.floor(secondsRemaining / 60);
var sec = secondsRemaining - (min * 60);
// add a leading zero (as a string value) if seconds less than 10
if (sec < 10) {
sec = "0" + sec;
}
// concatenate with colon
var message = min + ":" + sec;
// now change the display
timeDisplay.innerHTML = message;
// stop if down to zero
if (secondsRemaining === 0) {
alert("Done!");
clearInterval(intervalHandle);
resetPage();
}
// subtract from seconds remaining
secondsRemaining--;
}
function startCountdown() {
// get contents of the "minutes" text box
var minutes = document.getElementById("minutes").value;
// check if not a number
if (isNaN(minutes)) {
alert("Please enter a number!");
return;
}
// how many seconds?
secondsRemaining = minutes * 60;
// every second, call the "tick" function
intervalHandle = setInterval(tick, 1000);
// hide the form
document.getElementById("inputArea").style.display = "none";
}
function pauseCountdown() {
// pause timer
var clearIntervalHandle;
}
// as soon as the page is loaded...
window.onload = function () {
// create input text box and give it an id of "minutes"
var inputMinutes = document.createElement("input");
inputMinutes.setAttribute("id", "minutes");
inputMinutes.setAttribute("type", "text");
// create a button
var startButton = document.createElement("input");
startButton.setAttribute("type", "button");
startButton.setAttribute("value", "Start Countdown");
startButton.onclick = function () {
startCountdown();
};
// create a pause button
var pauseButton = document.createElement("input");
pauseButton.setAttribute("type", "button");
pauseButton.setAttribute("value", "Pause");
pauseButton.onclick = function () {
pauseCountdown();
}
// add to the DOM, to the div called "inputArea"
document.getElementById("inputArea").appendChild(inputMinutes);
document.getElementById("inputArea").appendChild(startButton);
};
