Ad

Thursday, August 14, 2008

Creating a Simple Countdown Timer Using JavaScript II...Using getElementById() Method

Using getElementById(id) Method

Speaking of yesterday’s post, it had the following problems:

1. It could not easily be embedded into an existing page.
2. It could not be placed wherever we wanted it to be nor it could be aligned or styled easily.
3. Rather than updating the same number to countdown it showed a series of numbers as countdown proceeded.

Well all these problems can easily be solved by one of JavaScript’s powerful method getElementById(). This is documents’s method which can be used to access HTML entities within JavaScript with the help of their IDs (which is unique).

For example we can access the HTML entity and its values etc. with the ID one as:

document.getElementById("one")

The HTML object may be defined like below:

<p id="one">some text</p>

You get!

OK, how can this be used to solve our problems, let’s see.

As we know, the HTML entities such as <p>,<div>, <span> etc. can be placed anywhere very easily. They can also be styled and aligned perfectly. So if we could print the timer in one of these, it’d be the most efficient technique. How? Using getElementById().

The body of tags such as <p>, <div> or <span> can be accessed via JavaScript as:

document.getElementById("one").innerHTML

e.g.: If we execute the following code:

document.getElementById("one").innerHTML="hello!!";

it’d be same as having the following HTML tag:

<p id="one">hello!!"</p>

This way two of our problems have been solved. What about the third one? It too has been solved, if you look closely.

For example when you write:

document.getElementById("one").innerHTML="First";

And then:

document.getElementById("one").innerHTML="Second";

The <p> would be displayed as having the text “Second”.

OK, below is the completed code:


  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>

  <head>
  <title>JavaScript Countdown Timer</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <script language="JavaScript" type="text/JavaScript">

  //to store timeout ID
  var tID;
  function tickTimer(t,id)
  {
    //if time is in range
    if(t>=0)
    {
      document.getElementById(id).innerHTML=t;
      t=t-1;
      tID=setTimeout("tickTimer('"+t+"','"+id+"')",1000);
    }
    //stop the timeout event

    else
    {
      killTimer(tID);
      document.getElementById(id).innerHTML="Time Out!!";
    }
  }

  //function to stop the timeout event
  function killTimer(id)
  {
    clearTimeout(id);
  }
  </script>

  <!--style the ID -->

  <style>
  #timer {
    background: #000;
    color: #fff;
    font-size: 20px;
  }
  </style>
  </head>
  <!--pass the id to timer has to attached to -->
  <body onLoad="tickTimer(9,'timer')" onUnload="killTimer(tID)">

  <p>Timer: <span id="timer"></span></p>
  </body>
  </html>

It depends on what you intend regarding which tag you should use to place to timer. If you want it to be inline with some text use <span>. <p> would make it to be in a different paragraph.

So in this post we saw a very powerful method getElementById() which can be used to access HTML objects and manipulate them. Check back for more!

Previous Posts:

3 comments:

  1. Your timer works just fine, but I'd like to note to your readers that if you are Using IE, be careful with the ID you use.

    IE has a bug where it will match on other elements in the DOM that appear before the one you want, if the name attribute matches the ID of the element you really want.

    I tried your script, with my ID set to "updated", but I had a field with that name too.

    There is a workaround for this as well as a better explanation here

    http://webbugtrack.blogspot.com/2007/08/bug-152-getelementbyid-returns.html

    In my case I changed my ID, but as a general rule I think fixing IE is the better approach.

    ReplyDelete
  2. Thanks.

    I'd recommend anyone reading this to check out Jackson's post.

    ReplyDelete
  3. very cool & good tip, thank you very much for sharing.

    Alternating script you can use is JavaScript Countdown Timer

    ReplyDelete

You are free to comment anything, although you can comment as 'Anonymous' it is strongly recommended that you supply your name. Thank You.

Please don't use abusive language.