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.