• Один файл Javascript на две страницы - ошибка 'addEventListener' of null?

    fAntonM
    @fAntonM Автор вопроса
    веб-разработчик, дизайнер
    Здравствуйте, еще раз коллеги!

    К сожалению, те ответы, что получил год назад, не подошли мне, т.к. не решали проблему просто и без танцев.
    Как оказалось, есть простое решение, которое используют многие разработчики.
    Необходимо для участка кода, который может потенциально вызвать ошибку и остановить весь скрипт ниже, применить конструкцию 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('Следующий код'); // Да, работает)
    Ответ написан
    1 комментарий