Search code examples
javascripthtmlcsstimercountdown

Countdown won't work


I have a script in which I have tried to make a countdown, which counts down for 30 days and then resets to 30 days and starts over again. But my problem is that when I open it in my browser(safari), the page is blank with nothing on it, although if I remove the function I am using to reset the countdown it works but I need it to reset.

if (seconds_left <= 0){
    target_date = target_date + 30 days;
}

Full code:

 <!DOCTYPE html>


<html>

<head>
</head>

<body>

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

    <script LANGUAGE="Javascript">

    var target_date = new Date("Apr 9, 2015").getTime();

    var days, hours, minutes, seconds;

    var countdown = document.getElementById("countdown");


    if (seconds_left <= 0){
            target_date = target_date + 30 days;
        }

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

</script>

</body>

</html>

Solution

  • <!DOCTYPE html>
    <html>
        <head></head>
        <body>
            <span id="countdown"></span>
    
            <script type="text/javascript">
    
            var target_date = new Date("Apr 9, 2015").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;
    
                //the following two lines are moved inside the function
                if (seconds_left <= 0)
                {
                    target_date = target_date + 30; //just 30 would suffice to add 30 days
                    seconds_left = (target_date - current_date) / 1000; //then update the seconds_left to continue
                }
    
                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);
        </script>
        </body>
    </html>