Javascript world clock only flashes up 1

[bobrivers2003]

I have been working on a world clock that use a gif of the world that has the major cities on the map set up as a clickable link that displays the time for that city. Default time is UK that shows when the page is first loaded. With my current set up when a city is clicked the time changes for that city only for a split second then changes back the uk time (which continues to count). Is there a way to have the time for a selected city stay up until another city is clicked?

Two files ->

worldClock.html:

snippet of city link = <AREA SHAPE="RECT" COORDS="5,97,62,118" HREF="Javascript:" OnClick="upclock(-8,'EST','Los Angelas'); return false;">

At the bottom of this file;

<!--
Script to start the clock
-->
<script>
setInterval("upclock('', '', '')",1000);
</script>
<DIV id="clockWT" style="display: block;" </DIV>


time.js:

function upclock(timeset, type, place){

var diff = timeset;
var city = place;
var timeType = type;

var dtUK = new Date();
var dtWT = new Date(dtUK.getTime()+ diff*60*60*1000);

var hrs1 = dtWT.getHours();
var min1 = dtWT.getMinutes();
var sec1 = dtWT.getSeconds();

var col = ":";
var spc = " ";

if (hrs1<=9) hrs1="0"+hrs1;
if (min1<=9) min1="0"+min1;
if (sec1<=9) sec1="0"+sec1;

clockWT.innerHTML = hrs1+col+min1+col+sec1;

}


Any help or pointers would be greatly appreciated

 

[BillyRayPreachersSon]

Yes - you have to cancel your original setInterval code and call it again with the new details. Either that, or have the "upclock" function get its parameters from global variables, and simply change those instead (could be easier).

Anyway - to cancel a function called by setInterval, you need to grab the handle to the timer. This is returned by the original call:

var timerHandle = setInterval(...);

...

clearInterval(timerHandle);

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[bobrivers2003]

I inserted

var timerHandle = setInterval(upclock(),1000);

at the top of the upclock() and

clearInterval(timerHandle);

at the bottom when i reload the page i get an alert that says Stack overflow at line 8, which is the line the new set interval is on. Also the clock doesn't show.

I also tried for each city:

OnClick="setInterval('upclock(-5,'EST','New York')', 1000'); return false;"

But when the city is clicked nothing happens.

Further assistence on this would be greatly appreciated.

 

[BillyRayPreachersSon]

I inserted

var timerHandle = setInterval(upclock(),1000);

at the top of the upclock()

i get an alert that says Stack overflow

Of course you will - you've just told us you're calling upclock from within itself, which will obvliously cause a stack overflow.

I never mentioned anything about changing the order, or the placement of the current code.

Try this as replacement code. Notice, that I've removed all the redundant parameters that you were never using, so you no longer need to pass them (i.e. you only need to pass the first parameter now).

<area shape="rect" coords="5,97,62,118" href="javascript:void(0);" onclick="changeClock(-8); return false;">

...

<script type="text/javascript">
<!--
	var timerHandle = setInterval('upclock(0)', 1000);
//-->
</script>

...

function changeClock(timeOffset) {
	if (timerHandle) clearInterval(timerHandle);
	timerHandle = setInterval('upclock(' + timeOffset + ')', 1000);
}

function upclock(timeOffset) {
	var dtWT = new Date().getTime() + (timeOffset * 3600000);	// 3600000 == 60 * 60 * 1000

	var hrs1 = dtWT.getHours();
	var min1 = dtWT.getMinutes();
	var sec1 = dtWT.getSeconds();

	if (hrs1 < 10) hrs1 = '0' + hrs1;
	if (min1 < 10) min1 = '0' + min1;
	if (sec1 < 10) sec1 = '0' + sec1;

	clockWT.innerHTML = hrs1 + ':' + min1 + ':' + sec1;
}

Hope this helps,
Dan




[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[bobrivers2003]

I can't thank you enough Dan it works great, JS is new to me so I might have done a few silly mistakes.

Thanks Again