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: