Skip to content
Advertisement

NaN countdown timer javascript

I have created a javascript countdown for a wordpress custom plugin. I’ve read this article and this is the first time I try to make something similar. After I’ve ended writing the code I was testing it and initially it was working fine. Now if I try to log the values of the hours minutes days and seconds in console I get a NaN message. I don’t know what’s wrong, can anyone help me?

<?php if( get_option('show-countdown') ): ?>
                    <div class="countdown">
                        <h1 class="days d-inline"></h1>
                        <h1 class="hours d-inline"></h1>
                        <h1 class="minutes d-inline"></h1>
                        <h1 class="seconds d-inline"></h1>
                    </div>

                    <script>
                    (function($){
                      $(document).ready(function(){

                            var date = '<?php echo get_option('countdown-timer'); ?>';
                            console.log(date);
                            function remainingTime( date ){
                                var countdown = Date.parse(date) - Date.parse(new Date());
                                var seconds = Math.floor( (countdown/1000) % 60 );
                                var minutes = Math.floor( (countdown/1000/60) % 60 );
                                var hours = Math.floor( (countdown/(1000*60*60)) % 24 );
                                var days = Math.floor( countdown/(1000*60*60*24) );
                                return {
                                'total': countdown,
                                'd': days,
                                'h': hours,
                                'm': minutes,
                                's': seconds
                              };
                            }

                            console.log(remainingTime(date));

                            function initClock( endtime ){
                                var timeinterval = setInterval(function(){
                                    var t = remainingTime( endtime );

                                    $('.days').html(t.d);
                                    $('.hours').html(t.h);
                                    $('.minutes').html(t.m);
                                    $('.seconds').html(t.s);
                                }, 1000);
                            }
                            initClock( '.countdown', date );

                        });
                    }(jQuery));
                    </script>
                <?php endif; ?>
                </div>

Advertisement

Answer

The issue was that you were passing two arguments to initClock, but the method signature only accepted one (endTime). By removing the first argument, which appeared to be an unused CSS selector string, the problem is resolved:

(function($) {
  $(document).ready(function() {

    var date = '2030-01-01';
    console.log(date);

    function remainingTime(date) {
      var countdown = Date.parse(date) - Date.parse(new Date());
      var seconds = Math.floor((countdown / 1000) % 60);
      var minutes = Math.floor((countdown / 1000 / 60) % 60);
      var hours = Math.floor((countdown / (1000 * 60 * 60)) % 24);
      var days = Math.floor(countdown / (1000 * 60 * 60 * 24));
      return {
        'total': countdown,
        'd': days,
        'h': hours,
        'm': minutes,
        's': seconds
      };
    }

    console.log(remainingTime(date));

    function initClock(endtime) {
      var timeinterval = setInterval(function() {
        var t = remainingTime(endtime);

        $('.days').html(t.d);
        $('.hours').html(t.h);
        $('.minutes').html(t.m);
        $('.seconds').html(t.s);
      }, 1000);
    }
    
    initClock(date);
  });
}(jQuery));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="countdown">
  <h1 class="days d-inline"></h1>
  <h1 class="hours d-inline"></h1>
  <h1 class="minutes d-inline"></h1>
  <h1 class="seconds d-inline"></h1>
</div>

Note: since this was primarily about the JavaScript, I removed the PHP conditional and hardcoded a date value in place of the get_option call.

User contributions licensed under: CC BY-SA
8 People found this is helpful
Advertisement