Modal window does not work on pages, what should I do?

• 0
  Hello everyone! I'm a newbie.
  Faced a problem:
  The modal only works on one page per click (I have a site of four pages). Moreover, if you place several buttons on this page, then they will all work and open a window.
  Js code:
  

  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 = "";
      });
    
    });
  })

  
  
  Below the footer on each page is the following code (modal):
  

  <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>

  
  
  On other pages, it gives the following error:
  

  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)

  JavaScript Anonymous, Sep 19, 2020

---

1 Answers
• 0
  As the error says.
  
  

  TypeError: Cannot read property 'addEventListener' of null

  
  
  If it works on one page but not on the other, look for differences between them. I am sure somewhere you either did not insert an element or an attribute, or you connect the script differently.

  Anonymous

---