By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,321 Members | 1,875 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,321 IT Pros & Developers. It's quick & easy.

Displaying a Counter using setContents

P: 16
How would you set up a counter in javascript that goes from 5 to 0

This is what i have so far and it is not displaying in the div container "counter" for some reason...

[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

#counter {border: 1px solid black; width: 100px; height: 100px; position: absolute; left: 450px; top: 10px;}
#leftcar {border: 1px solid black; width: 100px; height: 100px; position: absolute; left: 10px; top: 300px;}
#rightcar {border: 1px solid black; width: 100px; height: 100px; position: absolute; left: 800px; top: 300px;}
#explosion {border: 1px solid black; width: 100px; height: 100px; position: absolute; left: 450px; top: 300px;}
#controls {border: 1px solid black; width: 50px; height: 100px; position: absolute; left: 450px; top: 500px;}

</style>

<script>
function start () {
setContents ("counter",5);

var timer1= setTimeout("setContents('counter',4)",1000);
var timer2= setTimeout("setContents('counter',3)",2000);
var timer3= setTimeout("setContents('counter',2)",3000);
var timer4= setTimeout("setContents('counter',1)",4000);
var timer5= setTimeout("setContents('counter',0)",5000);
var timer6= setTimeout("setContents('counter',Go)",6000);

}
</script>
</head>

<body>

<div id="counter"></div>

<div id="explosion">
boom!
</div>

<div id="leftcar">
left car
</div>

<div id="rightcar">
right car
</div>

<div id="controls">
<form>
<input type="button" value="start" onclick="start();" />

<input type="button" value="reset" />

</form>
</div>



</body>
</html>[/HTML]
Feb 14 '07 #1
Share this Question
Share on Google+
5 Replies


acoder
Expert Mod 15k+
P: 16,027
setContents is undefined. Add the following to your code and it should work:
Expand|Select|Wrap|Line Numbers
  1. function setContents(id,val) {
  2.  document.getElementById(id).innerHTML = val;
  3. }
Feb 14 '07 #2

P: 16
setContents is undefined. Add the following to your code and it should work:
Expand|Select|Wrap|Line Numbers
  1. function setContents(id,val) {
  2.  document.getElementById(id).innerHTML = val;
  3. }

thanks acoder. that helped !!
how exactly does the innerHTML = val work ? Well I know what it does now, it places the value in the box right?

Is there a way to position the value in the center of the box ?
Feb 15 '07 #3

P: 16
also for some reason, it work in IE6.0 at all... am i missing anything?
Feb 15 '07 #4

acoder
Expert Mod 15k+
P: 16,027
thanks acoder. that helped !!
how exactly does the innerHTML = val work ? Well I know what it does now, it places the value in the box right?

Is there a way to position the value in the center of the box ?
innerHTML is not a standard but it provides an easy way to set or get the contents of an element. See this link and the MSDN link at the bottom of that page.
To position the value in the centre of the box, use CSS on the div:
Expand|Select|Wrap|Line Numbers
  1. text-align:center;
Feb 15 '07 #5

acoder
Expert Mod 15k+
P: 16,027
also for some reason, it work in IE6.0 at all... am i missing anything?
Talk about IE bugs/problems/you name it! start is probably a reserved word, so you have to change the name of the function and it should work fine.
Feb 15 '07 #6

Post your reply

Sign in to post your reply or Sign up for a free account.