-2

I am trying to include a real time clock into a <p></p> tag.

my js code is the following:

function updateClock ( )
{
  var currentTime = new Date ( );

  var currentHours = currentTime.getHours ( );
  var currentMinutes = currentTime.getMinutes ( );
  var currentSeconds = currentTime.getSeconds ( );

  // 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;

  // Compose the string for display
  var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;

  // Update the time display
  document.getElementById("clock").firstChild.nodeValue = currentTimeString;
}

which is in the "date.js" file, which i have included in the HTML code

the HTML code is

 <p id="clock">&nbsp;</p>

but nothing displays right... any solutions?

4
  • 5
    You mean, you copied some code and didn't got it working right away and now want us to debug for you? I think you'd be better off if you told us what you've tried, what error messages you're getting, etc. etc. Sep 5, 2011 at 11:59
  • 3
    Are you even calling the function updateClock() anywhere?
    – Valamas
    Sep 5, 2011 at 12:00
  • jsfiddle.net/QvuES At least it works on Google Chrome and IE9. 1. Check errors using console 2. change firstChild.nodeValue to innerText
    – JiminP
    Sep 5, 2011 at 12:03
  • <body onload="updateClock(); setInterval('updateClock()', 1000 )">, taken from the same page as the above function
    – mslliviu
    Sep 5, 2011 at 12:05

4 Answers 4

1

your <p> element having id as "clock" and you set the value to

document.getElementById("clock").firstChild.nodeValue = currentTimeString;

where is the child element(s) into the <p>, where it can be set the value of the currentTimeString to above element which was not exist or undefined in your html file.

you can do for display the value like this way

document.getElementById("clock").innerHTML = currentTimeString;
0

document.getElementById("clock").innerHTML = currentTimeString; should do the trick

0

http://jsfiddle.net/txzqt/

It seems to be working just fine. I'm guessing you forgot to call the updateClock() function itself here.

0

first of all if you are using date.js there are functionality to do what you are doing above built in. just do:

   var currentTimeString = new Date().toString('hh:mm:ss tt');

You have to make sure that your page is loaded before running the code as well. Are you running this on body onload? or are you calling your function at the end of the page? either of these should work.

1

Not the answer you're looking for? Browse other questions tagged or ask your own question.