I am developing an auction site on wordpress with woocommerce that requires countdown timer to show when the auction for a specific product is ending.
Following is the coundowntimer JS:
const dollersign = elem => document.querySelector(elem);
const countdown = function(_config) {
const tarDate = dollersign(_config.target).getAttribute('data-date').split('-');
const day = parseInt(tarDate[2]);
const month = parseInt(tarDate[1]);
const year = parseInt(tarDate[0]);
let tarTime = dollersign(_config.target).getAttribute('data-time');
let tarhour, tarmin;
if (tarTime != null) {
tarTime = tarTime.split(':');
tarhour = parseInt(tarTime[0]);
tarmin = parseInt(tarTime[1]);
}
let months = [31, new Date().getFullYear() % 4 == 0 ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
let dateNow = new Date();
let dayNow = dateNow.getDate();
let monthNow = dateNow.getMonth() + 1;
let yearNow = dateNow.getFullYear();
let hourNow = dateNow.getHours();
let minNow = dateNow.getMinutes();
let count_day = 0, count_hour = 0, count_min = 0;
let count_day_isSet = false;
let isOver = false;
// Set the date we're counting down to
const countDownDate = new Date(year, month-1, day, tarhour, tarmin, 0, 0).getTime();
//$(_config.target+' .day .word').innerHTML = _config.dayWord;
//$(_config.target+' .hour .word').innerHTML = _config.hourWord;
//$(_config.target+' .min .word').innerHTML = _config.minWord;
//$(_config.target+' .sec .word').innerHTML = _config.secWord;
const updateTime = () => {
// Get todays date and time
const now = new Date().getTime();
// Find the distance between now an the count down date
const distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
// If the count down is over, write some text
if (distance <= 0) {
dollersign(_config.target).innerHTML = "EXPIRED";
} else {
requestAnimationFrame(updateTime);
if(days!=0){
dollersign(_config.target+' .day .num').innerHTML = addZero(days);
}
if(_config.target != null){
dollersign(_config.target+' .hour .num').innerHTML = addZero(hours);
dollersign(_config.target+' .min .num').innerHTML = addZero(minutes);
dollersign(_config.target+' .sec .num').innerHTML = addZero(seconds);
}
}
}
updateTime();
}
const addZero = (x) => (x < 10 && x >= 0) ? "0"+x : x;
This is how you can use it in an HTML block:
<div class="countdown countdown-main" data-date="2023-09-25" data-time="18:00">
<h4>
<span class="day"><span class="num"></span><span class="word"></span></span>
<span class="hour"><span class="num"></span></span>:
<span class="min"><span class="num"></span></span>:
<span class="sec"><span class="num"></span></span>
</h4>
</div>
<script>
jQuery(document).ready(function() {
setTimeout(function(){
const myCountdown = new countdown({
target: ".countdown",
dayWord: " zile",
hourWord:" ore",
minWord: " minute",
secWord: " secunde"
});
}, 1000);
});
</script>
It works like a charm. But the problem is when you have to do query with ajax asin without loading the page. The script looks for the element that is removed, and throws long list of js error in the inspect element:
Uncaught TypeError: dollersign(…) is null
countdown.js?ver=1.0.0:49
I know you can use GET method and reload the page but is there any way to resolve this?
Thanks,