CODEWITHSUNDEEP
javascripthtml
FFBbodie
FFBbodie

Reputation: 111

JavaScript counter doesn't work

I have made a JavaScript counter like this:

window.onload = function(){
    var target_date = new Date("Aug, 15, 2019").getTime();
}
var days, hours, minutes, seconds;
var countdown = document.getElementById("countdown");

setInterval(function (){
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;

    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;

    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;

    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);

    countdown.innerHTML= days + "d, " + hours + "h, " + minutes + "m, " + seconds + "s"; 
}, 1000);

HTML:

<span id="countdown"></span>

The browser (Google Chorme) says: 

Uncaught ReferenceError: target_date is not defined

Even if I remove the window.onload = function(){}, the will still not work. What have I done wrong?

Upvotes: 0

Views: 303

Answers (3)

droymanz
droymanz

Reputation: 343

Just move the curly bracket "}" of the window.onload to the end of the script

window.onload = function(){
    var target_date = new Date("Aug, 15, 2019").getTime();
    var days, hours, minutes, seconds;
    var countdown = document.getElementById("countdown");

    setInterval(function (){
        var current_date = new Date().getTime();
        var seconds_left = (target_date - current_date) / 1000;

        days = parseInt(seconds_left / 86400);
        seconds_left = seconds_left % 86400;
        hours = parseInt(seconds_left / 3600);
        seconds_left = seconds_left % 3600;

        minutes = parseInt(seconds_left / 60);
        seconds = parseInt(seconds_left % 60);

        countdown.innerHTML= days + "d, " + hours + "h, " + minutes + "m, " + seconds + "s"; 
    }, 1000);
}

Upvotes: 0

Don
Don

Reputation: 292

Change your first "}" to the end of the script

window.onload = function(){
            var target_date = new Date("Aug, 15, 2019").getTime();

        var days, hours, minutes, seconds;
        var countdown = document.getElementById("countdown");

        setInterval(function (){
            var current_date = new Date().getTime();
            var seconds_left = (target_date - current_date) / 1000;

            days = parseInt(seconds_left / 86400);
            seconds_left = seconds_left % 86400;

            hours = parseInt(seconds_left / 3600);
            seconds_left = seconds_left % 3600;

            minutes = parseInt(seconds_left / 60);
            seconds = parseInt(seconds_left % 60);

            countdown.innerHTML= days + "d, " + hours + "h, " + minutes + "m, " + seconds + "s"; 
        }, 1000); 
        }

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128791

It's all to do with variable scope. Here your target_date is defined within your window.onload, making it local to that function. If you want to use the variable outside of that function, declare it globally by moving it outside of the function:

var target_date; /* Declared globally. */
window.onload = function(){
    target_date = new Date("Aug, 15, 2019").getTime();
}

Upvotes: 3

Related Questions