Почему консоль ругается на код?

Question

Заметил в консоли ошибку скрипта, в чем проблема? Вот скрин ошибки:

Скрин самого файла со строками:

Как видим строка 109 и 95.

Вот сам код:

  window.addEventListener('DOMContentLoaded', () => {
  list('.recept_shagi ol li')
});

const list = selector => {
  const listItems = document.querySelectorAll(selector) // достаем все нужные ДОМ узлы

  listItems.forEach((item, index) => { // перебераем каждый елемент и вставляем в него нужный спан с каунтером
    let span = document.createElement('span')
    span.classList.add('counter')
    span.innerHTML = `Шаг ${index + 1} <span class='counter-list'> из ${listItems.length} </span>` // тут текст каунтера
    item.append(span)
  });

  const lastItem = document.querySelectorAll('.recept_shagi ol li')[listItems.length - 1] // последний елемент списка 
  lastItem.lastChild.innerHTML = 'Готово'
}

Что не так с ним?

Answer 1

Проблема в том, что listItems возвращает пустой nodeList, так как не находит на странице ни одного элемента с подобным селектором. Требуется сделать проверку, что хотя бы один элемент найден, иначе не выполнять код.

  window.addEventListener('DOMContentLoaded', () => {
  list('.recept_shagi ol li')
});

const list = selector => {
  const listItems = document.querySelectorAll(selector) // достаем все нужные ДОМ узлы

  if (listItems.length === 0) {
    return false;  
  }

  listItems.forEach((item, index) => { // перебераем каждый елемент и вставляем в него нужный спан с каунтером
    let span = document.createElement('span')
    span.classList.add('counter')
    span.innerHTML = `Шаг ${index + 1} <span class='counter-list'> из ${listItems.length} </span>` // тут текст каунтера
    item.append(span)
  });

  const lastItem = document.querySelectorAll('.recept_shagi ol li')[listItems.length - 1] // последний елемент списка 
  lastItem.lastChild.innerHTML = 'Готово'
}

<div class="recept_shagi">
  <ol>
    <li></li>
  </ol>
</div>

БЛОГ НА HUSL

Почему консоль ругается на код?

Как видим строка 109 и 95.

Ответы (1 шт):