Не работает модально окно на страницах, что делать?

Question

[Aleks Kirilov]

Всем привет! Я новичок.
Столкнулся с проблемой:
Модальное окно работает только на одной странице при клике (у меня сайт из четырёх страниц). Причём если разместить несколько кнопок на этой странице, то все они будут работать и открывать окно.
Код js:

const modalTrigers = document.querySelectorAll('button[data-modal]');
    const modal = document.querySelector('.modal');
    const modalCloseBtn = document.querySelector('[data-close]');
  
    modalTrigers.forEach(item => {
      item.addEventListener('click', () => {
        modal.classList.toggle('show-modal');
        document.body.style.overflow = "hidden";
      });
    });
    
  
    modalCloseBtn.addEventListener('click', () => {
      modal.classList.toggle('show-modal');
      document.body.style.overflow = "";
    });
  
  });
})

Под футером на каждой странице вот такой код (модальное окно):

<div class="modal">
    <div class="modal__dialog">
        <div class="modal__content">
            <form action="#">
                <div data-close class="modal__close">&times;</div>
                <div class="modal__title">Мы свяжемся с вами как можно быстрее!</div>
                <input required placeholder="Ваше имя" name="name" type="text" class="modal__input">
                <input required placeholder="Ваш номер телефона" name="phone" type="phone" class="modal__input">
                <button class="btn btn_dark btn_min">Перезвонить мне</button>
            </form>
        </div>
    </div>
  </div>

На других страницах выдаёт такую ошибку:

jquery.min.js:2 jQuery.Deferred exception: Cannot read property 'addEventListener' of null TypeError: Cannot read property 'addEventListener' of null
    at HTMLDocument.<anonymous> (http://localhost:3000/js/main.js:52:16)
    at e (https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js:2:29453)
    at t (https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js:2:29755) undefined
k.Deferred.exceptionHook @ jquery.min.js:2
t @ jquery.min.js:2
setTimeout (async)
(anonymous) @ jquery.min.js:2
c @ jquery.min.js:2
add @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
Deferred @ jquery.min.js:2
then @ jquery.min.js:2
k.fn.ready @ jquery.min.js:2
k.fn.init @ jquery.min.js:2
k @ jquery.min.js:2
(anonymous) @ main.js:2
jquery.min.js:2 Uncaught TypeError: Cannot read property 'addEventListener' of null
    at HTMLDocument.<anonymous> (main.js:52)
    at e (jquery.min.js:2)
    at t (jquery.min.js:2)

Answer 1

[Alex]

Как гласит ошибка

TypeError: Cannot read property 'addEventListener' of null

Если на удной странице работает а на другой нет -- ищите отличия между ними. Уверен где-то вы либо не вставили элемент либо атрибут либо скрипт подключаете иначе.

Comments

[Aleks Kirilov]

Проверил, везде всё подключено и атрибуты имеются

[Aleks Kirilov]

Aleks Kirilov, Именно на одной странице, хоть сколько размести кнопок на этой странице - все будут работать.