Jump to content

solved-Javascript clock help


BooKwiznak

Recommended Posts

<!DOCTYPE html><html lang=""><head>  <meta charset="utf-8"><title></title><meta name="description" content="" />  <meta name="keywords" content="" /><meta name="robots" content="" /><script language="javascript">function calctime(){var currenttime = new Date();var hours = currenttime.getHours();var minutes = currenttime.getMinutes();var seconds = currenttime.getSeconds();var timesuffix = "AM";if (hours > 11){timesuffix = "PM";hours = hours – 12;}if (hours == 0){hours = 12;}if (hours < 10){hours = "0" + hours;}if (minutes < 10){minutes = "0" + minutes;}if (seconds < 10){seconds = "0" + seconds;}var clocklocation = document.getElementById('digitalclock');clocklocation.innerHTML = hours + ":" + minutes + ":" + seconds + " " + timesuffix;setTimeout("calctime()", 1000);}calctime();</script></head><body>	<div id="digitalclock">	</div></body></html>

I can't seem to get it to make a clock. Is there something missing? Please help!

Link to comment
Share on other sites

Is anything showing up in the browser's error console.I haven't tried your code yet, myself, but I will if you can't solve this yourself.

Link to comment
Share on other sites

When you first try to execute calctime, the page is still downloading. That means that <div id="digitalclock"> </div> does not yet exist. So when calctime tries to get a reference to that element, the reference comes back null. What you need to do is postpone the first execution of calctime until AFTER the element exists. The easiest way is to change the last line of your script from this:calctime();to this:window.onload = calctime;It is correct to not use the (parens), because you are assigning a function reference to window.onload. calctime will execute when the window has finished loading.You should learn this technique. Almost every script out there uses some variation of it.

Link to comment
Share on other sites

About ^^The HTML5 <!DOCTYPE html> is strict. That means the browser will not forgive errors in capitalization rules. It was common long ago to write the identifiers of event handlers in a kind of camelCase, like onClick, onChange, etc. A strict doctype does not permit this. Developers accustomed to working with HTML 4.01 strict already know this.Moving from a transitional doctype to any strict doctype requires a little brushup.

Link to comment
Share on other sites

I'm still getting a blank output. This is getting frustrating...I'm using Coda and I even tried this on DW and still I'm getting a blank output. What am I doing wrong?
please post your updated code so we can see what changes you have made.
Link to comment
Share on other sites

<!DOCTYPE html><html lang=""><head>  <meta charset="utf-8"><title></title><meta name="description" content="" />  <meta name="keywords" content="" /><meta name="robots" content="" /><script language="javascript">function calctime(){var currenttime = new Date();var hours = currenttime.getHours();var minutes = currenttime.getMinutes();var seconds = currenttime.getSeconds();var timesuffix = "AM";if (hours > 11){timesuffix = "PM";hours = hours – 12;}if (hours == 0){hours = 12;}if (hours < 10){hours = "0" + hours;}if (minutes < 10){minutes = "0" + minutes;}if (seconds < 10){seconds = "0" + seconds;}var clocklocation = document.getElementById('digitalclock');clocklocation.innerHTML = hours + ":" + minutes + ":" + seconds + " " + timesuffix;setTimeout("calctime()", 1000);}window.onload=calctime;</script></head><body>	<div id="digitalclock">	</div></body></html>

This is the updated code to which I'm still getting a blank output.

Link to comment
Share on other sites

Yeah. I'm not sure where you type this or copied it from, but the character you use for - is not the correct character. It looks almost the same, but it's really one of those fancy characters used for typesetting pretty text. Removing it and replacing it with the correct - character worked for me.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...