I am really stuck. (JavaScript)

I'm trying to create a JavaScript Standard clock (1AM to 12PM, 1PM to 12AM, not 0 to 23 hundred hours)
I've got the code set up, but it isn't working. here's the code:

Code: Select all: function Clockf() { var t=new Date(); var clock=toStandard(t.getHours()) + ":" + fillSpace(t.getMinutes()) + ":" + fillSpace(t.getSeconds()) + var mer; setTimeout("Clock()",1000); document.getElementById("clock").innerHTML=clock; } function fillSpace(value) { return(value>9) ? "" + value : "0" + value; } function toStandard(value) { return(value>9) ? "" + value : "0" + value; if(value==0) { value+12; mer="AM" } else if(value<12) { mer="AM" } else { value-12; mer="PM"; } }

and the page accessing it (as a test page):

Code: Select all: <html> <head><script src="behaviors/clock.js"></script> </head> <body onLoad="Clockf()"> <script src="behaviors/greeting.js"></script> <div id="clock"></div> </body> </html>

The other script in here loads properly, but the clock part never shows up. Anyone know what I'm doing wrong, or how I could fix it?
I originally had the last JS function as:

Code: Select all: function toStandard(value) { return(value>9) ? "" + value : "0" + value; return(value==0) ? value+12 && mer="AM" : (value<12) ? mer="AM" : value-12 && mer="PM"; }

You're making it too difficult. Follow the steps I've provided for a more simple solution.

Code: Select all: function Clockf() { var t=new Date(); var clock=toStandard(t.getHours()) + ":" + fillSpace(t.getMinutes()) + ":" + fillSpace(t.getSeconds()) + var mer; setTimeout("Clock()",1000); document.getElementById("clock").innerHTML=clock; }

Overkill.

Code: Select all: var currentTime = new Date ( ); var currentHours = currentTime.getHours ( ); var currentMinutes = currentTime.getMinutes ( ); var currentSeconds = currentTime.getSeconds ( );

That works just as well.

Code: Select all: function fillSpace(value) { return(value>9) ? "" + value : "0" + value; } function toStandard(value) { return(value>9) ? "" + value : "0" + value; if(value==0) { value+12; mer="AM" } else if(value<12) { mer="AM" } else { value-12; mer="PM"; } }

Instead of that, try this:

Code: Select all: // Pad the minutes and seconds with leading zeros, if required currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes; currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds; // Choose either "AM" or "PM" as appropriate var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM"; // Convert the hours component to 12-hour format if needed currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours; // Convert an hours component of "0" to "12" currentHours = ( currentHours == 0 ) ? 12 : currentHours;

and the page accessing it (as a test page):

Code: Select all: <html> <head><script src="behaviors/clock.js"></script> </head> <body onLoad="Clockf()"> <script src="behaviors/greeting.js"></script> <div id="clock"></div> </body> </html>

Just put it in the page.

Reference - Click for a working verison.

thanks. comparing the codes, mine is overkill.
I was using this site for a reference, and it's set up in a slightly confusing way...

it works now. the final code ended up as:

Code: Select all: function Clockf() { var D=new Date(); var H=D.getHours(); var M=D.getMinutes(); var S=D.getSeconds(); var mer=(H >= 12) ? "AM" : "PM"; M=(M < 10 ? "0" : "") + M; S=(S < 10 ? "0" : "") + S; H=(H > 12) ? H-12 : H; H=(H==0) ? 12 : H; var clock=H + ":" + M + ":" + S + " " + mer; document.getElementById("clock").innerHTML=clock; setTimeout("Clockf()",1000); }

Code: Select all: <html> <head><script src="behaviors/clock2.js"></script> </head> <body onLoad="Clockf()"> <script src="behaviors/greeting.js"></script> <div id="clock"></div> </body> </html>

I had wanted it as a dynamic clock, so it updates automatically with the time.
also, I like assigning my own variables. if I'm going to copy and paste it, I might as well not use the script anyway (that's why I learned JavaScript) and if I have to type out currentHours I might as well just type Date.getHours every time.
only a bit longer.

so, thanks for that. I was getting confused by my code...

Using your own variables is a good practice. Also, use descriptive variables (as you apparently are doing). I wasn't suggesting you take the code I posted, but just hoped that it showed you the correct way.

If you went to the side you'd have seen that the clock automatically updates like you're wanting. Hope everything is working now.

the site says you need to add a setInterval() function in the body tag to update it. I prefer to add a setTimeout() function in my function.
I looked through all the codes you had posted, and none of them contained anything that would update it.
I did get it to work, though.

You're right. Nothing I posted would indicate it would update.

However, if you had gone to the site* like I said, you'd have found this:

Updating Clock

* - I accidentally typed side instead of site in my last post.

I did check the site, just missed that link...
I have another question. does the setTimeout function work off the computer's clock? I mean, if I would set a timeout of 60000 (1 minute) would it start exactly 1 minute after the page loads, or would it sync with the computer clock, so the event triggered by the timeout would coincide perfectly with the user's computer's clock?

I am really stuck. (JavaScript)

I am really stuck. (JavaScript)

Re: I am really stuck. (JavaScript)

Re: I am really stuck. (JavaScript)

Re: I am really stuck. (JavaScript)

Re: I am really stuck. (JavaScript)

Re: I am really stuck. (JavaScript)

Re: I am really stuck. (JavaScript)

Who is online