未捕获的ReferenceError：未定义XXX

Question

I made a simple digital clock in JavaScript:

window.onload = function runMiniClock()
{
var time = new Date();
var hours = time.getHours();
var minutes = time.getMinutes();
minutes=((minutes < 10) ? "0" : "") + minutes;
ampm = (hours >= 12) ? "PM" : "AM";
hours=(hours > 12) ? hours-12 : hours;
hours=(hours == 0) ? 12 : hours;
var clock = hours + 1 + ":" + minutes + " " + ampm;
if(clock != document.getElementById('clock').innerHTML)
document.getElementById('clock').innerHTML = clock;
timer = setTimeout("runMiniClock()",1000);
setInterval(function(){
document.getElementById("clock").innerHTML = (new Date()).toLocaleTimeString();
}, 1000);
}

This code works perfectly, but when I open the console I see an error message:

Uncaught ReferenceError: runMiniClock is not defined

Why does it show that error message?

Here is the demo

Answer 1

Because runMiniClock is not a global function, it's a local name of the function expression that you assign to window.onload .

That eval -string you are passing to setTimeout is however evaluated in the global scope, where it does not find the function to be called. You anyway should always pass functions, not strings, to setTimeout .

You can fix this by using

timer = setTimeout(runMiniClock, 1000);

Also, notice that you have two different functions setting the innerHTML of #clock to different values, you'll want only one of them. And you're missing a few variable declarations , for ampm and timer .

( updated demo )

Answer 2

To be perfectly honest i didn't spend too much time looking into this. But your clock seems to run fine without that setTimeout call anyways?

I took it out in this js fiddle

http://jsfiddle.net/o35arzre/5/

and the clock still runs and increments appropriately.

are you sure it is needed?

var time = new Date();
var hours = time.getHours();
var minutes = time.getMinutes();
minutes=((minutes < 10) ? "0" : "") + minutes;
ampm = (hours >= 12) ? "PM" : "AM";
hours=(hours > 12) ? hours-12 : hours;
hours=(hours == 0) ? 12 : hours;
var clock = hours + 1 + ":" + minutes + " " + ampm;
if(clock != document.getElementById('clock').innerHTML) document.getElementById('clock').innerHTML = clock;
setInterval(function(){
document.getElementById("clock").innerHTML = (new Date()).toLocaleTimeString();
}, 1000);