Антон Михайлов

Здравствуйте, еще раз коллеги!

К сожалению, те ответы, что получил год назад, не подошли мне, т.к. не решали проблему просто и без танцев.
Как оказалось, есть простое решение, которое используют многие разработчики.
Необходимо для участка кода, который может потенциально вызвать ошибку и остановить весь скрипт ниже, применить конструкцию 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. Есть массив DOM элементов, повешен обработчик, КЛИКАЕМ на любом элементе в начале и получаем его переменную Index.
2. Index теперь видна во всем внешнем коде. ( еще раз - ПОСЛЕ клика). В редакторе кода вы просто так не получите значение Index через console.log(indexNum). Но в Devtools - получите.
3. Также, если внутри обработчика вызвать функцию и передать в аргументе Index то при клике функция сразу отработает и выдаст значение в консоль

- Это уже решает мою задачу, так как ранее я считал, что получить Index смогу только после дополнительных кликов в других местах кода и прочих танцев.

На всякий случай еще раз повторяю код с моими комментами, для себя и тех кто также не видит в консоли значения в глобальной переменной.

<div class="box ">1</div>
<div class="box ">2</div>
<div class="box ">3</div>

//Для тех кто в танке - далее все действия и комменты рассматриваются только после клика на DOM элементе

    let indexNum; // глоб. переменная, но можно и без нее выводить Index как есть
    let arr = []; // макссив для примера
    console.log(arr); // получу индекс из массива DOM, но увидеть весь массив arr можно в консоли DevTools
    console.log(arr[0]); //  также смотри в консоли DevTools


    // Вызвали ф. из обработчика и передали Index
    function test(index) {
      let a = index;
      console.log(a); // выдает после клика, т.к. функция начала работать после клика и получила значение Index
      console.log(`Из массива arr ${arr[0]}`);
    }
    console.log(indexNum); // так не увидешь никогда

    box.forEach((item, index) => {
      item.addEventListener('click', () => {
        indexNum = index;
        arr.push(index); // пушим для примера в массив arr

        test(indexNum); //вызываем для примера ф. и передаваем значение именно отсюда 
      });
    });