Pause Button for Countdown Timer?

**amateurhour** · Jun 10, 2012 12:42

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

**amateurhour** · Jun 10, 2012 14:14

Quick update: I figured out how to get the Pause button to display on the html page by using the getElementById command, etc. (code pasted below)

document.getElementById("inputArea").appendChild(pauseButton);

**amateurhour** · Jun 10, 2012 16:00

I figured it out (code below). I don't know if it's the most elegant, but it works.

JS Code
// pause timer
var intervalHandle = setInterval();
pauseButton.onclick = function() {
clearInterval(intervalHandle);
}

HTML CODE
<body>
<div id="container">
<div id="inputArea">
</div>

<h1 id="time">0:00</h1>

</div>

<div id="pauseButton">
<input type="button" value="Pause" onclick="pauseTimer();">
</div>

<script src="script.js"></script>
</body>

**paul_wilkins** · Jun 10, 2012 17:43

Originally Posted by amateurhour

I figured it out (code below). I don't know if it's the most elegant, but it works.

You've done well there.

The variables are nicely named, and the script is loading from the end of the page.

About the only update that I would make to it is to remove the inline event attribute from the HTML, and move it to a more appropriate place in the code itself.
And possibly the creation of the button too, since it makes no sense for those without scripting to see a button that they cannot interact with.

Code html4strict:

<div id="pauseButton"></div>

Code javascript:

function addPauseButton() {
    var container = document.getElementById('pauseButton'),
        button = document.createElement('input');
    button.type = 'button';
    button.value = 'Pause';
    button.onclick = pauseTimer;
    container.appendChild(button);
}
 
addPauseButton();

**amateurhour** · Jun 11, 2012 08:10

Originally Posted by paul_wilkins

You've done well there.

About the only update that I would make to it is to remove the inline event attribute from the HTML, and move it to a more appropriate place in the code itself.
And possibly the creation of the button too, since it makes no sense for those without scripting to see a button that they cannot interact with.

Thanks for your feedback!

**amateurhour** · Jun 11, 2012 09:34

I'm not sure where is the best place to put the div and the javascript code? I've been trying different locations in the page, but I can't get the pause button to work. thanks.

**paul_wilkins** · Jun 11, 2012 09:35

Originally Posted by amateurhour

Thanks for your feedback!

You're welcome.

Another way to do that button via scripting is with the innerHTML command.

Code javascript:

function addPauseButton() {
    var container = document.getElementById('pauseButton');
    container.innerHTML = '<input type="button" value="Pause">';
    container.firstChild.onclick = pauseTimer;
}
 
addPauseButton();

That technique went out of favour due to not being official in web browsers and it not being supported by XHTML code, but since virtually all XHTML code isn't actually XHTML code, but is instead an HTML version of XHTML due to Internet Explorer not supporting XHTML at all, and that innerHTML is now unofficially supported by virtually all web browsers, it's becoming more popular again now.

The only issue that I have with using innerHTML is that it brings HTML code more clearly into the scripting environment, which really should have a clear demarcation between the two.

And so a third technique, and possibly the preferred one, is to use CSS to display things as they should be without scripting (no button), and to then use scripting to adjust the class name to bring the button back.

Code css:

.hidden {
    display: none;
}

Code html4strict:

<div id="pauseButton" class="hidden">
    <input type="button" value="Pause"> 
</div>

We can't use firstChild here any more, because the white space in the above HTML between the div and the input elements is considered the first child, so we'll get the input element by its tag name instead.

Code javascript:

function removeClass(element, name) {
    // function for demo purposes only - use class-handling functions found at
    // http://snipplr.com/view/3561/addclass-removeclass-hasclass/
   element.className = '';
}
 
var container = document.getElementById('pauseButton'),
    button = container.getElementsByTagName('input')[0];
removeClass(button, 'hidden');
button.onclick = pauseTimer;

That seems to be the best way, which works regardless of whether scripting is enabled or not, and keeps everything demarcated to where they belong. There's no CSS in the HTML, no HTML in the scripting, and no scripting in the HTML either.

**amateurhour** · Jun 11, 2012 10:52

Thanks very much. Because I'm still new to js, I'm still not sure where is the best place to put the html code and the remove class function.

User Tag List

Thread: Pause Button for Countdown Timer?

Thread Tools

Display

Pause Button for Countdown Timer?

Thanks!

Bookmarks

Bookmarks

Posting Permissions