NaN countdown timer javascript

Question

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>

does console.log(date); correctly output the date you passed via PHP? — GrafiCode
– GrafiCode, Commented Jan 14, 2020 at 17:11
also, you are calling initClock function passing it 2 parameters, while your function declaration seems to accept only 1 parameter (endtime) — GrafiCode
– GrafiCode, Commented Jan 14, 2020 at 17:16
consider this fiddle: jsfiddle.net/yk7m8zu1 it logs numbers. Object total: -65895000 d: -1 h: -19 m: -19 s: -15 — GrafiCode
– GrafiCode, Commented Jan 14, 2020 at 17:17

coreyward · Accepted Answer · 2020-01-14 17:23:32Z

2

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.

answered Jan 14, 2020 at 17:23

coreyward

80.5k21 gold badges148 silver badges176 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

sisaln Over a year ago

I'm using the hardcoded get_option() function of wordpress because I'm not able to use the wp_localize_script() to pass the needed value from the backend. This because the plugin script is using the wp_loaded hook to show the maintenance screen page so the wp_enqueue_script and wp_enqueue_style functions are not fired and I'm not able to pass the data.

coreyward Over a year ago

@sisaln Sure, you're welcome to continue to do that, I just noted that I changed it for the example to run so you didn't get confused.

sisaln Over a year ago

Thanks for your help. Do you have also a solution to use the wp_enqueue_ functions when it's used the wp_loaded hook action?

Collectives™ on Stack Overflow

NaN countdown timer javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related