Hi, this is my first time posting, and I'm a relative newbie when it comes to JavaScript. I've been working on this problem since yesterday, and everything I try produces errors.
Bascially, I have a function in a separate .js file which gets the date and time, formats them, and then displays them on the page, using "innerHTML", and updates every second.
Here's the script:
Code:
function dateTime() {
var d=new Date();
var weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var monthname=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
var m = (m < 10)?"0" + m:m // Keep 2 digit format
var s = (s < 10)?"0" + s:s // Keep 2 digit format
var ap = null; // Am or Pm
if (h < 12) { ap = "am"; }
else { ap = "pm"; }
if (h == 0) { h = 12; } // Normal Hours (not Military)
else { if (h > 12) { h -= 12; }}
var oTags = "<table style='border: 0px none; font: 28px;' width='99%'>" +
"<tr><td width='50%' align='left' title='Current Date'>";
var mTags = "</td><td width='50%' align='right' title='Current Time'>";
var cTags = "</td></tr></table>";
obj_dateTime = document.getElementById("dateTime");
obj_dateTime.innerHTML = oTags +
weekday[d.getDay()] + ": " +
monthname[d.getMonth()] + ", " +
d.getDate() + " " +
d.getYear() +
mTags + h + ":" + m + ":" + s + " " + ap +
cTags;
setTimeout("dateTime()",1000);
}
Then I call the function in the body tag: <body onload="dateTime();">
Now, it works great... The problem is that it can only be used once per page, since it refers to the "dateTime" ID. On my HTML page, it goes where <div id="dateTime"></div> goes, and to the best of my knowledge, one ID can only be used in one tag.
What if I wanted to have four clocks going on the same page, each in a different time zone or something, and I wanted to create them all using this one function, like:
<body onload="dateTime(0, "regClock"); dateTime(-5, "othClock");">
The variables sent are the hour offset (like -5 is five hours before the time on my computer), and the ID name where I want to write the data (like <div id="regClock"></div> . How could I go about doing this?
I've already tried changing the code so that the dateTime() function received the ID to be used by changing the following lines:
Code:
function dateTime(target)
...
obj_dateTime = document.getElementById(target);
...
setTimeout("dateTime(target)",1000);
But I kept getting " 'target' is undefined " errors... It works the first time (right when the page loads), so the clock shows up, but after one second, when the function is called again, it produces that error, and the clock stops refreshing. I would think that if "setTimeout" was called using the value of 'target', it would enter the same value into the variable 'target' when it calls the function again... Am I on the right track, or should I set this up differently?
Ultimately, I probably won't have more than one clock on my page, but I would still like to have the function be able to be used multiple times on the same page, and not be forced to use 'dateTime' as an ID each time.
I'm also currently working on a countdown page, counting down to various things I'm looking forward to in realtime, and that IS going to have more than one instance on the same page. Thanks in advance for your help!
Before you post, read our: 
