CODEWITHSUNDEEP
javascriptclock
Ronna Encarnacion
Ronna Encarnacion

Reputation: 13

Clock not working?

So I followed a pretty strait-forward video tutorial on adding a clock in your webpage through JS. I have the exact same code, but it's not working on mine. Any suggestions? Thank you!

This is my code:

<body>

    <div id="clockDisplay">00:00</div>


<!-- JAVASCRIPT starts here -------------------------------------------------------->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" language="JavaScript">

$(window).load(function renderTime() {
    var currentTime = new Date () ;
    var diem = "AM" ;
    var h = currentTime.getHours() ;
    var m = currentTime.getminutes() ;
    var s = currentTime.getSeconds() ;

    if (h == 0) {
        h = 12;
    } else if (h > 12) {
    h = h -12;
    diem = "PM" ;
    }
    if (h < 10) {
        h = "0" + h;
    }
    if (m < 10) {
        m = "0" + m;
    }
    if (s < 10) {
        s = "0" + s;
    }

    var myClock = document.getElementyID('clockDisplay');
    myClock.textContent = h + ":" + m + ":" + s + " " + diem;
    setTimeout(renderTime()' ,1000) ;
};
renderTime() ;

</script>

<!-- JAVASCRIPT ends here --------------------------------------------------------->

</body>

Upvotes: 0

Views: 1095

Answers (4)

MD ABDUL KADIR
MD ABDUL KADIR

Reputation: 1

I have created a digital clock on my personal developing website but its not animated... My javascript is below:

07:23:45 PM 
<script>
function webClock() {
  var pos = "PM";
  var pickTime = new Date();
  var h = pickTime.getHours();
  var m = pickTime.getMinutes();
  var s = pickTime.getSeconds();

  if(h == 0){
    h = 12;

  }else if(h>12){
     h = h-12;
     pos="AM";
  }

 if(h<10){
      h = "0" + h;

  }
  if(m<10){
      m = "0" + m;

  }
  if(s<10){
      s = "0" + s;

  } 

   document.getElementById('MyClock').innerHTML= h + ":" + m + ":" + s + " " +"pos"; 

   setTimeout(webClock, 500);
}
webClock();

}
</script>

Upvotes: 0

Ta Duy Anh
Ta Duy Anh

Reputation: 1488

Too many things to fix here, this is my code :

<body>

    <div id="clockDisplay">00:00</div>


<!-- JAVASCRIPT starts here -------------------------------------------------------->

<script type="text/javascript" language="JavaScript">

function renderTime() {
    var currentTime = new Date () ;
    var diem = "AM" ;
    var h = currentTime.getHours() ;
    var m = currentTime.getMinutes() ;
    var s = currentTime.getSeconds() ;

    if (h == 0) {
        h = 12;
    } else if (h > 12) {
    h = h -12;
    diem = "PM" ;
    }
    if (h < 10) {
        h = "0" + h;
    }
    if (m < 10) {
        m = "0" + m;
    }
    if (s < 10) {
        s = "0" + s;
    }

    var myClock = document.getElementById('clockDisplay');
    myClock.textContent = h + ":" + m + ":" + s + " " + diem;

}
window.onload = renderTime;
setInterval(renderTime ,1000) ;

</script>

<!-- JAVASCRIPT ends here --------------------------------------------------------->

</body>

To see details fix, go there : Fixed issues detail link

Upvotes: 0

devnull69
devnull69

Reputation: 16544

You have a syntax error (quote mismatch) in your setTimeout code. You should never use a string as the first parameter of setTimeout.

setTimeout(renderTime, 1000);

And you don't need the $(window).load() if you put your Javascript code after the element with id="clockDisplay"

function renderTime() {
   ...
}
renderTime();

These need to be changed as well.

getElementById()
getMinutes()

Upvotes: 2

Ryan
Ryan

Reputation: 5682

Don't know what tutorial your following but I would change this line:

myClock.textContent = h + ":" + m + ":" + s + " " + diem;

to this:

myClock.innerHTML = h + ":" + m + ":" + s + " " + diem;

Upvotes: 0

Related Questions