Как исправить ошибку Uncaught TypeError: Cannot set properties of null (setting 'textContent')?

Question

[ROman_Vi]

Возникла ошибка:

Uncaught TypeError: Cannot set properties of null (setting 'textContent')
    at countdownTimer (timer.js:24:23)
    at HTMLDocument.<anonymous> (timer.js:47:3)
countdownTimer @ timer.js:24
(анонимная) @ timer.js:47

Не знаю, как решить.

Код:

document.addEventListener('DOMContentLoaded', function () {
  // конечная дата
  const deadline = new Date('2023, 09, 25');
  // id таймера
  let timerId = null;
  // склонение числительных
  function declensionNum(num, words) {
    return words[
      num % 100 > 4 && num % 100 < 20
        ? 2
        : [2, 0, 1, 1, 1, 2][num % 10 < 5 ? num % 10 : 5]
    ];
  }
  // вычисляем разницу дат и устанавливаем оставшееся времени в качестве содержимого элементов
  function countdownTimer() {
    const diff = deadline - new Date();
    if (diff <= 0) {
      clearInterval(timerId);
    }
    const days = diff > 0 ? Math.floor(diff / 1000 / 60 / 60 / 24) : 0;
    const hours = diff > 0 ? Math.floor(diff / 1000 / 60 / 60) % 24 : 0;
    const minutes = diff > 0 ? Math.floor(diff / 1000 / 60) % 60 : 0;
    const seconds = diff > 0 ? Math.floor(diff / 1000) % 60 : 0;
    $days.textContent = days < 10 ? '0' + days : days;
    $hours.textContent = hours < 10 ? '0' + hours : hours;
    $minutes.textContent = minutes < 10 ? '0' + minutes : minutes;
    $seconds.textContent = seconds < 10 ? '0' + seconds : seconds;
    $days.dataset.title = declensionNum(days, ['день', 'дня', 'дней']);
    $hours.dataset.title = declensionNum(hours, ['час', 'часа', 'часов']);
    $minutes.dataset.title = declensionNum(minutes, [
      'минута',
      'минуты',
      'минут',
    ]);
    $seconds.dataset.title = declensionNum(seconds, [
      'секунда',
      'секунды',
      'секунд',
    ]);
  }
  // получаем элементы, содержащие компоненты даты
  const $days = document.querySelector('.timer__days');
  const $hours = document.querySelector('.timer__hours');
  const $minutes = document.querySelector('.timer__minutes');
  const $seconds = document.querySelector('.timer__seconds');
  // вызываем функцию countdownTimer
  countdownTimer();
  // вызываем функцию countdownTimer каждую секунду
  timerId = setInterval(countdownTimer, 1000);
});

Comments

[Moses Fender]

Немного оффтоп.

Если IE принципиально не важен, то вместо
$days.textContent = days < 10 ? '0' + days : days;
можно воспользоваться конструкцией:
$days.textContent = String(days).startPad(2, '0');

Answer 1

[Вадим]

const $days = document.querySelector('.timer__days');
const $hours = document.querySelector('.timer__hours');
const $minutes = document.querySelector('.timer__minutes');
const $seconds = document.querySelector('.timer__seconds');

Одна из этих переменных на момент исполнения кода - null. То есть такого элемента нет в разметке.

Не знаю как решить.

Ну для начала стоит научиться читать тексты ошибок и понимать о чём они Вам говорят.
Эта Вам говорит что не может установить свойство textContent у null. Это уже говорит о многом куда копать.

А так же нужно научиться отладке своего кода https://learn.javascript.ru/debugging-chrome