SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

  2. #2
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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);

  3. #3
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by amateurhour View Post
    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();
    Last edited by paul_wilkins; Jun 11, 2012 at 09:31.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks!

    Quote Originally Posted by paul_wilkins View Post
    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!

  6. #6
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by amateurhour View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •