World Clock in Javascript - Can you help please?

[Zapico]

I'm constructing a web page in Frontpage 2003 - don't let that put you off!!- and inserting some javascript to show the time in other cities in the world via a drop-list. I've pulled some fee code from a Java site and adapted it for my own use. The nature of the problem can best be illustrated using this simple example.

On my webpage I want to display the time in a European city and so I have inserted the following javascript:-

<table border="0" width="368" cellspacing="0" cellpadding="3"> 
<form name="europe"> 
  <tr> 
    <td width="100%"> 
<select name="city" size="1" onchange="updateclock)this);"> 
<option value="" selected>Local time</option> 
<option value="2">European City1</option>
<option value="1">European City2</option>
<option value="2">European City3</option>
<option value="2">European City4</option>
<option value="1">European City5</option>


</select>&nbsp;&nbsp;<font color="#000080"> <a
       <p align="left"> 
<script language="JavaScript"> 


if )document.all||document.getElementById) 
document.write)'<span id="worldclock" style="font:bold 10pt Arial;"></span><br>') 

zone=0; 
isitlocal=true; 
ampm=''; 

function updateclock)z){ 
zone=z.options)z.selectedIndex).value; 
isitlocal=)z.options)0).selected)?true:false; 
} 

function WorldClock)){ 
now=new Date)); 
ofst=now.getTimezoneOffset))/60; 
secs=now.getSeconds)); 
sec=-1.57+Math.PI*secs/30; 
mins=now.getMinutes)); 
min=-1.57+Math.PI*mins/30; 
hr=)isitlocal)?now.getHours)):)now.getHours)) + parseInt)ofst)) + parseInt)zone); 
hrs=-1.575+Math.PI*hr/6+Math.PI*parseInt)now.getMinutes)))/360; 
if )hr < 0) hr+=24; 
if )hr > 23) hr-=24; 
ampm = )hr > 11)?"PM":"AM"; 
statusampm = ampm.toLowerCase)); 

hr2 = hr; 
if )hr2 == 0) hr2=12; 
)hr2 < 13)?hr2:hr2 %= 12; 
if )hr2<10) hr2="0"+hr2 

var finaltime=hr2+':'+))mins < 10)?"0"+mins:mins)+':'+))secs < 10)?"0"+secs:secs)+' '+statusampm; 

if )document.all) 
worldclock.innerHTML=finaltime 
else if )document.getElementById) 
document.getElementById)"worldclock").innerHTML=finaltime 
else if )document.layers){ 
document.worldclockns.document.worldclockns2.document.write)finaltime) 
document.worldclockns.document.worldclockns2.document.close)) 
} 


setTimeout)'WorldClock))',1000); 
} 

window.onload=WorldClock 
//--> 
</script> 

</font> 

</td> 
  </tr> 
  <tr> 
    <td width="100%"> 

<!--Place holder for NS4 only--> 
<ilayer id="worldclockns" width=100% height=35><layer id="worldclockns2" width=100% height=35 left=0 top=0 style="font:bold 10pt Arial;"></layer></ilayer> 

</td> 
</form> 
  </tr> 
</table>

Looking at the code above, the option value allows the actual time in a particular European city to be displayed immediately to the right of the drop-down list conataining the names of European Cities. On its own, this code works perfectly. When I preview the result in Frontpage 2003, I see the inital value of the drop-down list and to the right of the list, is the local time in the UK. If I then select, for example, European city5, from the drop-down list, the time immediately to the right of the drop-down list advances 1 hour as it should do.

The problem arises when I want to insert the same code further down the webpage for American Cities. I've inserted the following code:-

<table border="0" width="368" cellspacing="0" cellpadding="3"> 
<form name="australasia"> 
  <tr> 
    <td width="100%"> 
<select name="city" size="1" onchange="updateclock)this);"> 
<option value="" selected>Local time</option> 
<option value="" selected>Local time</option> 
<option value="-8">American City1</option>
<option value="-5">American City2</option>
<option value="-6">American City3</option>
<option value="-5">American City4</option>
<option value="-7">American City5</option>

</select>&nbsp;&nbsp;<font color="#000080"> <a
       <p align="left"> 
<script language="JavaScript"> 


if )document.all||document.getElementById) 
document.write)'<span id="worldclock" style="font:bold 10pt Arial;"></span><br>') 

zone=0; 
isitlocal=true; 
ampm=''; 

function updateclock)z){ 
zone=z.options)z.selectedIndex).value; 
isitlocal=)z.options)0).selected)?true:false; 
} 

function WorldClock)){ 
now=new Date)); 
ofst=now.getTimezoneOffset))/60; 
secs=now.getSeconds)); 
sec=-1.57+Math.PI*secs/30; 
mins=now.getMinutes)); 
min=-1.57+Math.PI*mins/30; 
hr=)isitlocal)?now.getHours ) ) : ) now.getHours)) + parseInt)ofst)) + parseInt)zone); 
hrs=-1.575+Math.PI*hr/6+Math.PI*parseInt)now.getMinutes)))/360; 
if )hr < 0) hr+=24; 
if )hr > 23) hr-=24; 
ampm = )hr > 11)?"PM":"AM"; 
statusampm = ampm.toLowerCase)); 

hr2 = hr; 
if )hr2 == 0) hr2=12; 
)hr2 < 13)?hr2:hr2 %= 12; 
if )hr2<10) hr2="0"+hr2 

var finaltime=hr2+':'+))mins < 10)?"0"+mins:mins)+':'+))secs < 10)?"0"+secs:secs)+' '+statusampm; 

if )document.all) 
worldclock.innerHTML=finaltime 
else if )document.getElementById) 
document.getElementById)"worldclock").innerHTML=finaltime 
else if )document.layers){ 
document.worldclockns.document.worldclockns2.document.write)finaltime) 
document.worldclockns.document.worldclockns2.document.close)) 
} 


setTimeout)'WorldClock))',1000); 
} 

window.onload=WorldClock 
//--> 
</script> 

</font> 

</td> 
  </tr> 
  <tr> 
    <td width="100%"> 

<!--Place holder for NS4 only--> 
<ilayer id="worldclockns" width=100% height=35><layer id="worldclockns2" width=100% height=35 left=0 top=0 style="font:bold 10pt Arial;"></layer></ilayer> 

</td> 
</form> 
  </tr> 
</table>

However, when I now preview the results, the clocks to the right of each drop down lists disappear regardless of whatever options I choose from either drop-down list. I've been careful to choose a unique name each form used and I cannot understand where the coding is going wrong. I've tried putting each clock in a separate layer and this doesn't work.

Can anyone point me in the right direction as my aim is to have one web page with separate world clocks for Europe, Asia-middle East, Africa, US & Canada and S Ameria/Caribbean I don't want to combine all cities into one drop down list - which would work - as there are nearly 340 cities to choose from!

Many thanks

[Jaws]

From the looks of things the way that you are duplicating the javascript there is causing you problems.

For a start you are creating two spans with identical ids ("worldclock") and the code does a document.getElementById to access the elements, the trouble is they both have the same id.

There is also the issue of you creating more than one function with the same name.

I expect what is happening is by having these errors in there frontpage is experiencing javascript errors and not running the rest of the code because it is unable to.

I would suggest factoring out the duplication in your code (or if you want to be sloppy, just rename your functions, elements and global variables so there are no duplicates).