Здравствуйте, еще раз коллеги!
К сожалению, те ответы, что получил год назад, не подошли мне, т.к. не решали проблему просто и без танцев.
Как оказалось, есть простое решение, которое используют многие разработчики.
Необходимо для участка кода, который может потенциально вызвать ошибку и остановить весь скрипт ниже, применить конструкцию Try-Catch
Ее суть в том, что если в коде обнаружится ошибка, то код отловит эту ошибку, НО продолжит работу.
Подробнее можете посмотреть на MDN.
Теперь еще раз повторю суть проблемы:
Те, кто собирают многостраничный проект без сборщиков, с одним файлом JS и навешивают обработчики на какие то элементы DOM, которых может не быть на других страницах HTML - получат ошибку не тех страницах и код встанет.
Исходные данные и порядок работы:
1. Два файла HTML ( index и contacts) например
2. В index есть элемент с классом text ( и еще сотни других элементов с другими классами)
3. В contacts - нет элемента с классом text ( но могут быть другие классы, не суть)
4. Есть общий (один) файл script.js , он подключен к обоим файлам HTML
5. В js файле находим класс text и навешиваем обработчик - click
6. Открываем index – все Ок
7. Открываем – contacts – видим ошибку - Cannot read properties of null (reading 'addEventListener')
8. Скрипт останавливает свою работу ниже обработчика.
Вот пример кода с ошибкой:
const text = document.querySelector('.text');
// Получаем ошибку при открытии страницы contacts - Cannot read properties of null (reading 'addEventListener')
text.addEventListener('click', ()=> {
console.log('result');
});
// Дальше код не идет
console.log('Следующий код'); // не работает
Решение:
Нам необходимо вставить проблемный участок кода в блок Try конструкции try-catch:
const text = document.querySelector('.text');
try {
text.addEventListener('click', ()=> {
console.log('result');
});
} catch(error) {
console.log(error); // выведет о чем ошибка
//Но, можно ничего не писать вообще в блоке catch
}
// Дальше код продолжает работу
console.log('Следующий код'); // Да, работает)
