Если ничего не найдено

Что будет, если querySelector() ничего не найдёт, например из-за опечатки в селекторе? Тогда он вернёт null — особое значение, которое означает «ничего».

const price = document.querySelector("#prise");
console.log(price); // Выводит: null

У null нет свойств, поэтому следующая строка, которая его использует, закончится ошибкой:

console.log(price.textContent);

TypeError: Cannot read properties of null (reading 'textContent')

Сообщение говорит: не удаётся прочитать свойство textContent у null. Если вы не читаете текст, а меняете его, сообщение немного другое: TypeError: Cannot set properties of null (setting 'textContent'). Оба означают одно и то же: в переменной лежит null, потому что элемент не нашёлся.

Ошибка останавливает скрипт: строки после неё не выполняются. Чаще всего элемент не находится по таким причинам:

• опечатка в селекторе или в HTML: "#prise" вместо "#price",
• пропущенный # или точка: "price" ищет элемент с именем тега price, а такого нет,
• буквы не совпадают точно: "#Price" не найдёт id="price", а ".bigPrice" не найдёт class="big-price",
• элемент script стоит не в конце body, поэтому в момент запуска скрипта этих элементов ещё нет.

Если вы видите такую ошибку, выведите элемент через console.log(). Если там null, сверьте селектор с index.html буква за буквой.