Ошибки TypeError: null is not an object в таймере на айфоне из-за чего она может быть?

Question

[Влад ~]

Всем привет!
на сайте есть таймеры на технике apple они выдают ошибку TypeError: null is not an object (evaluating 'deadlineinput3.getAttribute')
вот кода самого таймера

const timer = (id, deadline) => {
    const addZero = (num) => {
        if (num <= 9) {
            return '0' + num;
        } else {
            return num;
        }
    };

    const getTimeRemaining = (endtime) => {
        const t = Date.parse(endtime) - Date.parse(new Date()),
              seconds = Math.floor((t / 1000) % 60), 
              minutes = Math.floor((t / 1000 / 60) % 60),
              hours = Math.floor((t / (1000 * 60 * 60)) % 24),
              days = Math.floor((t / (1000 * 60 * 60 * 24)));
        return {
            'total': t,
            'days': days,
            'hours': hours,
            'minutes': minutes,
            'seconds': seconds
        };
    };
    
    const setClock = (selector, endtime) => {
        const timer = document.querySelector(selector),
              days = timer.querySelector('#days'),
              hours = timer.querySelector('#hours'),
              minutes = timer.querySelector('#minutes'),
              seconds = timer.querySelector('#seconds'),
              timreInterval = setInterval(updateClock, 1000);
        updateClock();
        function updateClock() {
           
            const t = getTimeRemaining(endtime);
            days.textContent = addZero(t.days);
            hours.textContent = addZero(t.hours);
            minutes.textContent = addZero(t.minutes);
            seconds.textContent = addZero(t.seconds);

            if (t.total <= 0){
                days.textContent = '00';
                hours.textContent = '00';
                minutes.textContent = '00';
                seconds.textContent = '00';
                // location.reload();
                clearInterval(timreInterval);
                const next = document.querySelectorAll('.btn-next');
                next.forEach(item => {
                    // item.classList.add('event-none');
                })
            }
        }
    };
    // запуск таймера
    setClock(id, deadline);
};
export default timer;

вот вызов таймера

try {
        const deadlineInput3 = document.querySelector('[name="quiz_deadline"]');
        let deadline3 = deadlineInput3.getAttribute('value');
        timer('#quizeTimer', deadline3);
        console.log(deadline3);
    } catch (error) {
        console.log('timer catch');
        alert(error)
    }

Answer 1

[fallus]

Если в endtime приходит что-то вроде "11.08.2020", то тут может быть проблема в том, что Сафари — хороший браузер.
На сколько помню, формат даты в этом браузере не dd.mm.yyyy и не dd-mm-yyyy, а dd/mm/yyyy

Я бы проверил так, чтобы локализировать проблему:

try {
	const deadlineInput3 = document.querySelector('[name="quiz_deadline"]')
	let deadline3 = deadlineInput3.getAttribute('value')

	// Если это Сафари
	if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
		deadline3 = deadline3.replace(/-/g, '/').replace(/\./g, '/')
	}

	timer('#quizeTimer', deadline3)
	console.log(deadline3)
} catch (error) {
	console.log('timer catch')
	alert(error)
}

Comments

[fallus]

А ещё, я бы посоветовал обернуть всё в

window.addEventListener(() => {
try {
  const deadlineInput3 = document.querySelector('[name="quiz_deadline"]')
  let deadline3 = deadlineInput3.getAttribute('value')

  // Если это Сафари
  if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
    deadline3 = deadline3.replace(/-/g, '/').replace(/\./g, '/')
  }

  timer('#quizeTimer', deadline3)
  console.log(deadline3)
} catch (error) {
  console.log('timer catch')
  alert(error)
}
})

С DOM'ом ведь работаете. А он как маленький ребёнок с молоком. Раз — и убежал в Кыргызтан.

[reaget]

А для чего вы всё в EventListener засунули?)