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

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!