469,356 Members | 2,250 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,356 developers. It's quick & easy.

Displaying a Counter using setContents

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
5 1880
acoder
16,027 Expert Mod 8TB
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
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
also for some reason, it work in IE6.0 at all... am i missing anything?
Feb 15 '07 #4
acoder
16,027 Expert Mod 8TB
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
16,027 Expert Mod 8TB
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.

Similar topics

4 posts views Thread by Shane | last post: by
9 posts views Thread by matthiasjanes | last post: by
16 posts views Thread by Paul Rubin | last post: by
9 posts views Thread by Pygmalion | last post: by
16 posts views Thread by =?Utf-8?B?VGFtbXkgTmVqYWRpYW4=?= | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.