...

View Full Version : timeout/interval



trib4lmaniac
07-13-2004, 06:35 PM
JavaScript ain't my forté :( Help please!

I keep getting (in IE) error "Error: N is not defined on Line: 23"
It clearly is! Wondering if timeout's and/or interval's remove vars or something. If I call the function normally it works fine.

The script is to make a live clock with the vars at the top being kinda like master vars where everything else falls around it. Well commented, hopefully not too hard to follow. init() just draws the clocks face and hands, updateDot() moves the specified dot to its proper place, (according to time,) and updateClock() just loops through the dots updating them with updateDot()!

Three links - one called normally, one called with interval and one with timeout...
Standard (http://mq.astronomyforbeginners.com/clock-std.htm)
setInterval (http://mq.astronomyforbeginners.com/clock-int.htm)
setTimeout (http://mq.astronomyforbeginners.com/clock-tmo.htm)

Only use IE!

sad69
07-13-2004, 06:46 PM
I dunno if I'm doing something wrong, but I just did a view source and the first thing I see is a series of H1's. I don't see any Javascript code whatsoever. So I'm not sure how you're generating this, but it's not using client side Javascript.

I also don't get the same error as you, I get an 'Object expected' error.

Sadiq.

Willy Duitt
07-13-2004, 08:44 PM
I do not see any javascript on those pages either.
But worse yet is that there is absolutely no formatting and the entire codes are on one line!

sad69
07-13-2004, 08:56 PM
Weird, I just opened it in FireFox and now I can view the source. It doesn't work of course, but at least the source is available.

I'll take a look and see if I can figure anything out.

setInterval


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
<!--
/* common vars */
var N=12; // the number of... numbers!
var dN=9; // number of dots per hand
var rX=150; // clock width (radius)
var rY=150; // clock height (radius)
var cX=250; // center X
var cY=200; // center Y
var PI=Math.PI; // self-explanatory
var W=PI*2; // 360 degree turn in radians
var Q=PI/2; // 90 degree turn in radians
function init()
{
/* output the center dot */
document.write('<h1 style="position:absolute;left:'+cX+';top:'+cY+'">.</h1>');
/* loop to output the numbers in the appropriate places */
for(i=1;i<=N;i++)
{
var X=rX*Math.sin(W/N*i)+cX;
var Y=rY*Math.cos((W/N*i)+(Q*2))+cY;
document.write('<h1 style="position:absolute;left:'+X+';top:'+Y+';">'+i+'</h1>');
}
/* loops to create hands */
for(i=1;i<=dN;i++) // second hand
{
var dY=cY-((rY/dN)*i)/1.1; // higher division makes hand shorter
document.write('<h1 id="second'+i+'" r="'+(cY-dY)+'" style="color:#C00;position:absolute;left:'+cX+'px;top:'+dY+'px;">.</h1>');
}
for(i=1;i<=dN;i++) // minute hand
{
dY=cY-((rY/dN)*i)/1.2; // higher division makes hand shorter
document.write('<h1 id="minute'+i+'" r="'+(cY-dY)+'" style="color:#369;position:absolute;left:'+cX+'px;top:'+dY+'px;">.</h1>');
}
for(i=1;i<=dN;i++) // hour hand
{
dY=cY-((rY/dN)*i)/2.2; // higher division makes hand shorter
document.write('<h1 id="hour'+i+'" r="'+(cY-dY)+'" style="color:#393;position:absolute;left:'+cX+'px;top:'+dY+'px;">.</h1>');
}
setInterval("updateClock()", 1000);
}
function updateDot(id)
{
/* get the current date and time */
var now=new Date();
var seconds=now.getSeconds();
var minutes=now.getMinutes();
var hours=(now.getHours()>12)?now.getHours()-12:now.getHours(); // correct 24 hour clock
switch(id.substring(0, id.length-1))
{
case 'second':
var turn=seconds/15;
break;
case 'minute':
var turn=minutes/15;
break;
case 'hour':
var turn=hours/3;
break;
}
/* position the dot accordingly */
var dot=document.getElementById(id);
var r=dot.getAttribute('r');
var X=r*Math.sin(Q*turn)+cX;
var Y=r*Math.cos((Q*turn)+(Q*2))+cY;
dot.style.left=X;
dot.style.top=Y;
}
function updateClock()
{
for(i=1;i<=dN;i++)
{
updateDot('second'+i);
updateDot('minute'+i);
updateDot('hour'+i);
}
}
window.onload=init;
-->
</script>
</head>

<body>

</body>
</html>

sad69
07-13-2004, 09:16 PM
Ok, I've found some answer to the problem.

It seems that if you call init() in the onLoad handler, because you're using document.write(), it overwrites all the source code (including your Javscript functions).

Therefore, it overwrites your variables too. That's why when we view source in IE, we can't see the Javascript. Hence there's no updateClock() function to call when the interval expires.

Simply moving the call to init() from the onLoad handler into the body seems to fix that. While I was messing with the code to figure out what was going wrong, I ended up with this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
<!--
/* common vars */
var N=12; // the number of... numbers!
var dN=9; // number of dots per hand
var rX=150; // clock width (radius)
var rY=150; // clock height (radius)
var cX=250; // center X
var cY=200; // center Y
var PI=Math.PI; // self-explanatory
var W=PI*2; // 360 degree turn in radians
var Q=PI/2; // 90 degree turn in radians
function init()
{
//document.write('<button onclick="updateClock()">update</button>');
/* output the center dot */
document.write('<h1 style="position:absolute;left:'+cX+';top:'+cY+'">.</h1>');
/* loop to output the numbers in the appropriate places */
for(i=1;i<=N;i++)
{
var X=rX*Math.sin(W/N*i)+cX;
var Y=rY*Math.cos((W/N*i)+(Q*2))+cY;
document.write('<h1 style="position:absolute;left:'+X+';top:'+Y+';">'+i+'</h1>');
}
/* loops to create hands */
for(i=1;i<=dN;i++) // second hand
{
var dY=cY-((rY/dN)*i)/1.1; // higher division makes hand shorter
document.write('<h1 id="second'+i+'" r="'+(cY-dY)+'" style="color:#C00;position:absolute;left:'+cX+'px;top:'+dY+'px;">.</h1>');
}
for(i=1;i<=dN;i++) // minute hand
{
dY=cY-((rY/dN)*i)/1.2; // higher division makes hand shorter
document.write('<h1 id="minute'+i+'" r="'+(cY-dY)+'" style="color:#369;position:absolute;left:'+cX+'px;top:'+dY+'px;">.</h1>');
}
for(i=1;i<=dN;i++) // hour hand
{
dY=cY-((rY/dN)*i)/2.2; // higher division makes hand shorter
document.write('<h1 id="hour'+i+'" r="'+(cY-dY)+'" style="color:#393;position:absolute;left:'+cX+'px;top:'+dY+'px;">.</h1>');
}
updateClock();
}
function updateDot(id)
{
/* get the current date and time */
var now=new Date();
var seconds=now.getSeconds();
var minutes=now.getMinutes();
var hours=(now.getHours()>12)?now.getHours()-12:now.getHours(); // correct 24 hour clock
switch(id.substring(0, id.length-1))
{
case 'second':
var turn=seconds/15;
break;
case 'minute':
var turn=minutes/15;
break;
case 'hour':
var turn=hours/3;
break;
}
/* position the dot accordingly */
var dot=document.getElementById(id);
var r=dot.getAttribute('r');
var X=r*Math.sin(Q*turn)+cX;
var Y=r*Math.cos((Q*turn)+(Q*2))+cY;
dot.style.left=X;
dot.style.top=Y;
}
function updateClock()
{
//alert('updating');
for(i=1;i<=dN;i++)
{
updateDot('second'+i);
updateDot('minute'+i);
updateDot('hour'+i);
}
}
//window.onload=init;
-->
</script>
</head>

<body>

<script>
init();
setInterval("updateClock()", 1000);
</script>

</body>
</html>


The hands of the clock seem to work fine, but the numbers are gone.. not sure what happened there..

Hope that helps, Good luck!
Sadiq.

Willy Duitt
07-13-2004, 09:55 PM
Weird, I just opened it in FireFox and now I can view the source. It doesn't work of course, but at least the source is available.

Oh, I see said the blind man....

Yea, IE is rendering the script but I/we were only see the results of the document.write statements overwriting the page and thus, the errors are being thrown because the script is no longer on the page...

glenngv
07-14-2004, 04:59 AM
Only use IE!
Your sig tells us not to. :D

trib4lmaniac
07-14-2004, 09:39 AM
Hmmm okay, I've got the hand's working now. (Thank you sadiq.) The numbers haven't disappeared, but now they're all bunched up into the top-left corner! Anyone shed some light on this?

clock-nf.htm (http://mq.astronomyforbeginners.com/clock-nf.htm)

glenngv
07-14-2004, 09:54 AM
Might want to see how it was done here (http://www.dynamicdrive.com/dynamicindex6/analog.htm).

trib4lmaniac
07-14-2004, 10:16 AM
That's nice, but I would still like to see what's wrong with mine. I can't work it out, if I alert the X and Y coordinates for the numbers, they appear to come out fine, but they're not being displayed in the right place!

clock-alt.htm (http://mq.astronomyforbeginners.com/clock-alt.htm)

trib4lmaniac
07-14-2004, 10:22 AM
Okay, according to moz's DOM Inspector the h1's for the numbers don't have top or left style attributes. Don't know why, there clearly there!

glenngv
07-14-2004, 10:48 AM
The reason it didn't work is not the h1 but that the left and top properties don't have units.


/* output the center dot */
document.write('<h1 style="position:absolute;left:'+cX+'px;top:'+cY+'px">.</h1>');
/* loop to output the numbers in the appropriate places */
for(i=1;i<=N;i++)
{
...
document.write('<h1 style="position:absolute;left:'+X+'px;top:'+Y+'px;">'+i+'</h1>');

You've got the px in the clock hands parts, you must have overlooked it in the dot and numbers part.

trib4lmaniac
07-14-2004, 01:38 PM
Ah great, thanks glenn :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum