Ответы пользователя по тегу JavaScript
  • Один файл 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 комментарий
  • Как вывести наружу переменную из EventListener?

    fAntonM
    @fAntonM Автор вопроса
    веб-разработчик, дизайнер
    Спасибо всем)

    Делаю правку своего ответа на следующий день. Разобрался).

    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); //вызываем для примера ф. и передаваем значение именно отсюда 
          });
        });
    Ответ написан
  • СreateElement - как взаимодействовать с созданным элементом?

    fAntonM
    @fAntonM Автор вопроса
    веб-разработчик, дизайнер
    Всем спасибо.
    Получено кроме моего, 2 решения, от Вадим и от bingumd

    + мое решение без JS
    Создал сразу 6 элементов в HTML, три спрятал через display none. На мобилке показал их. Все.
    Ответ написан
    Комментировать