SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: countdown timer

  1. #1
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    countdown timer

    Hi everyone.

    I am trying to implement a countdown timer which is displayed on my page. The counter needs to countdown from 10 seconds to 0 upon the page loading up.

    I tried the following, but am running into difficulties.

    //Some other script here^^^^

    var counterForm = document.createElement("form");
    counterForm.name = "form";
    counterForm.action = "";
    var para5 = document.createElement("p");
    var counterInput = document.createElement("input");
    counterInput.type = "text";
    counterInput.name = "abc";
    counterInput.id = "abc";
    counterInput.value = '';
    counterForm.appendChild(counterInput);
    para5.appendChild(counterForm);
    document.body.appendChild(para5);

    } //closes this function

    var milisec=0 //simple variables
    var seconds=10
    function display(){
    if (milisec<=0){
    milisec=9
    seconds-=1
    }
    if (seconds<=-1){
    milisec=0
    seconds+=1
    }
    else {
    milisec-=1
    document.counterInput.value=seconds+"."+milisec
    setTimeout("display()",100)
    }

    The first part of the code is I snippet of function start() which is called as follows:

    <body onload="start()">
    </body>

    The error I’m being given is “counterInput is not defined”.

    I had this script working as a separate page, but when I tried adding into my work, the problems started.

    Any suggestions?

  2. #2
    SitePoint Evangelist pip's Avatar
    Join Date
    Jun 2001
    Location
    Cape Town, South Africa
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Note my changes:

    Code JavaScript:
        function buildForm() {
            var counterForm = document.createElement("form");
            counterForm.name = "form";
            counterForm.action = "";
     
            var para5 = document.createElement("p");
            var counterInput = document.createElement("input");
            counterInput.type = "text";
            counterInput.name = "abc";
            counterInput.id = "abc";
            counterInput.value = '';
            counterForm.appendChild(counterInput);
     
            para5.appendChild(counterForm);
            document.body.appendChild(para5);
        }
     
        var milisec = 0;
        var seconds = 10;
     
        function display() {
            if (milisec <= 0) {
                milisec = 9;
                seconds -= 1;
            }
            if (seconds <= -1) {
                milisec = 0;
                seconds += 1;
            } else {
                milisec -= 1;
                document.getElementById("abc").value = seconds + "." + milisec;
                setTimeout("display()",100);
            }
        }
     
        window.onload = function() {
            buildForm();
            display();
            return;
        };

    The way you're referencing your element could be a problem... counterForm was never defined under the document object model. Referencing it as "document.counterForm" is inevitable not to exist. Instead, I used the ID of your counterForm element to set the value accordingly.
    - Pip
    ---------------------------------------------------------------------------------
    Nothing takes the taste out of peanut butter quite like unrequited love.


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
  •