Getting error Cannot read property 'getTime' of undefined

Question

I'm experiencing this error when I'm trying to set up a countdown for everyday. This is my script:

var date;
var display = document.getElementById('time');

$(document).ready(function() {
    getTime('GMT', function(time){
        date = new Date(time);
    });    
});

setInterval(function() {
    date = new Date(date.getTime() + 1000);

    var currenthours = date.getHours();
    var hours;
    var minutes;
    var seconds;
    if (currenthours != 21){
        if (currenthours < 21) {
            hours = 20 - currenthours;
        } else {
            hours = 21 + (24 - currenthours);
        }
        minutes = 60 - date.getMinutes();
        seconds = 60 - date.getSeconds();

        if (minutes < 10) {
            minutes = '0' + minutes;
        }
        if (seconds < 10) {
            seconds = '0' + seconds;
        }

        display.innerHTML = hours + ':' + minutes + ':' +seconds;
     } else { 
        display.innerHTML = 'LIVE NOW';
    }
}, 1000);

function getTime(zone, success) {
    var url = 'http://json-time.appspot.com/time.json?tz=' + zone,
        ud = 'json' + (+new Date());
    window[ud]= function(o){
        success && success(new Date(o.datetime));
    };
    document.getElementsByTagName('head')[0].appendChild((function(){
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.src = url + '&callback=' + ud;
        return s;
    })());
}

and the line that causes this error is

date = new Date(date.getTime() + 1000);

Basically what I'm trying to do is create a countdown that resets daily.

Answer 1

The getTime call within the $(document).ready takes more than a second to finish which means that the setInterval you set before it executes first. Thus, the date variable is not set yet.

To fix this, move your setInterval call to after you initialize the date variable within the callback function to ensure your date is always set before the setInterval function executes.

var date;
var display = document.getElementById('time');

$(document).ready(function() {
    getTime('GMT', function(time){
        date = new Date(time);

        setInterval(function() {
            date = new Date(date.getTime() + 1000);

            var currenthours = date.getHours();
            var hours;
            var minutes;
            var seconds;
            if (currenthours != 21){
                if (currenthours < 21) {
                    hours = 20 - currenthours;
                } else {
                    hours = 21 + (24 - currenthours);
                }
                minutes = 60 - date.getMinutes();
                seconds = 60 - date.getSeconds();

                if (minutes < 10) {
                    minutes = '0' + minutes;
                }
                if (seconds < 10) {
                    seconds = '0' + seconds;
                }

                display.innerHTML = hours + ':' + minutes + ':' +seconds;
           } else { 
                display.innerHTML = 'LIVE NOW';
           }
        }, 1000);
    });    
});

function getTime(zone, success) {
    var url = 'http://json-time.appspot.com/time.json?tz=' + zone,
        ud = 'json' + (+new Date());
    window[ud]= function(o){
        success && success(new Date(o.datetime));
    };
    document.getElementsByTagName('head')[0].appendChild((function(){
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.src = url + '&callback=' + ud;
        return s;
    })());
}