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:
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.
ReplyDeleteIE 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.
Thanks.
ReplyDeleteI'd recommend anyone reading this to check out Jackson's post.
very cool & good tip, thank you very much for sharing.
ReplyDeleteAlternating script you can use is JavaScript Countdown Timer