Uncaught TypeError: Cannot read property 'addEventListener' of null in more html files

Question

Есть несколько html файлов и один скрипт. При подключении скрипта перед закрывающим тегом body ко всем страницам он перестаёт видеть DOM элементы, если закомментить функции, где есть данные DOM элементы, то скрипт продолжает работать. Например, если в файле phrase.html, закомментить все функции которые привязаны к DOM элементам в image.html, то функции для phrase.html заработают.

import {handleCopyText, submitPhraseResult, loadImageSubmit, hoverFirstImageError, hoverSecondImageError, unhoverImageError, 
    popupOpen, popupClose} from './utils.js';

// Quote
const userInput = document.querySelector('#user-input');
const phraseResult = document.querySelector('.qoute__phrase-result');
const phraseButton = document.querySelector('.quote__form-button');
const phrase = document.querySelector('.quote__phrase-name');
const copyInput = document.querySelector('#user-input-copy');
const copyButton = document.querySelector('.quote__form-button-copy');
// Quote

// Image
const imageContainer = document.querySelector('.image__load');
const firstImageError = document.querySelector('#first-error');
const secondImageError = document.querySelector('#second-error');
const imageErrors = Array.from(document.querySelectorAll('.image__load-violations'));
const imageButtonLoad = document.querySelector('.image__form-button');
const loadText = document.querySelector('.image__load-text');

const firstText = document.querySelector('#first-text');
const secondText = document.querySelector('#second-text');

const imagePunishment = document.querySelector('.image__result')

// Image

// Popup
const popupOpenButton = document.querySelector('.header__login-button');
const popup = document.querySelector('.popup');
const popupCloseButon = popup.querySelector('.popup__exit-button');
// Popup

export {userInput, phraseResult, phrase, copyInput, imageContainer, loadText, imageErrors, firstImageError, 
    secondImageError, firstText, secondText, popup, imagePunishment};



phraseButton.addEventListener('click', submitPhraseResult);

copyButton.addEventListener("click", handleCopyText);

imageButtonLoad.addEventListener('click', loadImageSubmit);

firstImageError.addEventListener('mouseover', hoverFirstImageError);
secondImageError.addEventListener('mouseover', hoverSecondImageError);

firstImageError.addEventListener('mouseout', unhoverImageError);
secondImageError.addEventListener('mouseout', unhoverImageError);

popupOpenButton.addEventListener('click', popupOpen);
popupCloseButon.addEventListener('click', popupClose);

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./pages/index.css" /> 
    <title>Hakaton 2020</title>
</head>
<body class="page">

    <header class="header">
        <div class="header__logo-and-menu-wrap">
          <a href="./index.html" class="header__logo">
            <p>logo</p>
          </a>
          <ul class="menu menu_place_header">
            <li class="menu__list"><a class="menu__link" href="quote.html">Проверить цитату</a></li>
            <li class="menu__list"><a class="menu__link" href="image.html">Проверить картинку</a></li>
            <li class="menu__list"><a class="menu__link" href="text.html">Проверить текст</a></li>
          </ul>
        </div>
        <button class="header__login-button">Войти/зарегистрироваться</button>
      </header>

    <section class="quote">
    <h1 class="qoute__title">Загрузите изображение - мы проверим её на нарушение</h1>
    <div class="image__form-box">
        <!-- <form class="image__form" name="image-load-form" method="POST" id="image-load-form"> -->
            <div class="image__load">
                <p class="image__load-text">Перенесите сюда изображение для проверки</p>
                <div class="image__load-violations" id="first-error">
                    <p class="image__load-violations-text" id="first-text"></p>
                </div>
                <div class="image__load-violations " id="second-error">
                    <p class="image__load-violations-text" id="second-text"></p>
                </div>
            </div>
            <button class="image__form-button" type="submit" >Загрузить изображение</button>
            <!-- <fieldset class="image__form-set">
            <label class="image__form-field">
            <input class="image__form-input" id="user-input" name="user-input" type="text" placeholder="Сформулируйте вашу мысль"></input>
            <button class="quote__form-button" type="submit" >Подобрать цитату</button>
            </label>
            </fieldset> -->
        <!-- </form> -->
           </div>
        <div class="image__result">
            <h2 class="image__load-title">Если вы используете это изображение в публикации вам грозит</h2>
            <div class="image__punishment">
            <p class="image__punishment-text">Вам грозит<br>
            От 1 до 5 лет лишений свободы на основании УК РФ Статья 319. Оскорбление представителя власти</p>
            <img class="image__punishment-image"  src="./images/Власть.png" alt="Фото"/>
            </div>
        </div>
        <p class="image__text">
            Мы живём в мире цензуры, постоянной слежки и ощущения опасности. Что большой брат наблюдает за нами и любой проступок 
            будет караться. Поэтому мы дорожим вашей безопасностью, и оказанным доверием. Мы не храним никаких ваших персональных 
            данных: 
            <br>- IP адрес удаляется каждый час;
            <br>- Кэш сайта стирается после вашего посещения;
            <br>- Для регистрации в системе мы используем seed-фразу. Ваши личные данные не используются.
        </p>
 
    </section>

    <footer class="footer">
        <p>Подвал</p>
      </footer>

      <div class="popup">
        <div class="popup__container">
          <button type="button" aria-label="Close_popup" class="popup__exit-button"></button>
          <form name="popup_form-enter" class="popup__form">
            <p class="popup__input-descr">Войти с помощью секретной фразы</p>
            <input 
              type="text" 
              name="popup-secret-phrase-input" 
              minlength="2" 
              maxlength="40" 
              class="popup__input popup__input_type_phrase" 
              required >
    
            <button 
              name="popup_form-enter-button" 
              type="submit" 
              class="popup__submit-button">
              Войти
            </button>
          </form>
    
          <form name="popup_form-generate" class="popup__form">
            <p class="popup__input-descr">Создать новую секретную фразу</p>
            <input 
              type="text" 
              name="popup-phrase-generate-input" 
              minlength="2" 
              maxlength="40"
              class="popup__input popup__input_type_generate" 
              required >
    
            <button 
              name="popup_form-generate-button" 
              type="submit" 
              class="popup__submit-button">
              Сгенерировать
            </button>
          </form>
          <article class="popup__article">
            Секретная фраза это ваш логин в нашей системе. 
            Сохраните его если планируете обращаться к истории ваших
             обращений и если вам понадобятся дополнительные услуги.
          </article>
        </div>
      </div>
    <script type="module" src="./scripts/sctipt.js"></script> 
</body>
</html>

Answer 1

phraseButton && phraseButton.addEventListener('click', submitPhraseResult);
...

или

if (phraseButton) phraseButton.addEventListener('click', submitPhraseResult);
...

БЛОГ НА HUSL

Uncaught TypeError: Cannot read property 'addEventListener' of null in more html files

Ответы (1 шт):