Не срабатывает обработчик addEventListener

Question

НЕ могу найти ошибку несколько дней, помогите, пожалуйста. Данный пример учебный проект, только обучаюсь html и js. Cпасибо. Такой html :

<template id="card">
    <article class="map__card popup">
      <img src="img/avatars/user01.png" class="popup__avatar" width="70" height="70" alt="Аватар пользователя">
      <button type="button" class="popup__close">Закрыть</button>
      <h3 class="popup__title">Уютное гнездышко для молодоженов</h3>
      <p class="popup__text popup__text--address">102-0082 Tōkyō-to, Chiyoda-ku, Ichibanchō, 14−3</p>
      <p class="popup__text popup__text--price">5200&#x20bd;<span>/ночь</span></p>
      <h4 class="popup__type">Квартира</h4>
      <p class="popup__text popup__text--capacity">2 комнаты для 3 гостей</p>
      <p class="popup__text popup__text--time">Заезд после 14:00, выезд до 10:00</p>
      <ul class="popup__features">
        <li class="popup__feature popup__feature--wifi"></li>
        <li class="popup__feature popup__feature--dishwasher"></li>
        <li class="popup__feature popup__feature--parking"></li>
        <li class="popup__feature popup__feature--washer"></li>
        <li class="popup__feature popup__feature--elevator"></li>
        <li class="popup__feature popup__feature--conditioner"></li>
      </ul>
      <p class="popup__description">Великолепная квартира-студия в центре Токио. Подходит как туристам, так и бизнесменам. Квартира полностью укомплектована и недавно отремонтирована.</p>
      <div class="popup__photos">
        <img src="" class="popup__photo" width="45" height="40" alt="Фотография жилья">
      </div>
    </article>
  </template>

нужно чтобы при клике на кнопку(Закрыть )и при нажатии клавиши esc закрывалось данное окно, я подключаю файл main.js в конце html перед закрывающим тегом body

<script src = "js/main.js"></script>
</body>

В main.js :

var ESC_KEY = 'Escape';
var button = document.querySelector('.popup__close');

var onPinEscPress = function (e) {
  if (e.key === ESC_KEY) {
    removeCardElement();
  }
};

var onPinCloseCard = function (e) {
  if (typeof e === 'object' && e.button === 0) {
    removeCardElement();
  }
};

button.addEventListener('keydown', onPinEscPress);
button.addEventListener('mousedown', onPinCloseCard);

Когда запускается сайт в консоле, выдает ошибку Uncaught TypeError: Cannot read property 'addEventListener' of null Когда в console.log(button) cообщение null в консоле браузера Это не jQuery

Answer 1

У вас обработка клавиши Escape происходит на кнопке. Нужно помешать обработчик на весь документ (либо на весь div, правда в этом я не уверен :) )

И на кнопку button.addEventListener('mousedown', onPinCloseCard); не обработку 'mousedown', а обычный 'click'.

<p class="card">Карточка, которую нужно скрыть</p>
<button class="close_btn">Закрыть</button>
<script>
  const card = document.querySelector('.card')
  const close_btn = document.querySelector('.close_btn')
  document.addEventListener('keydown', e => {
    if (e.key === 'Escape') {
      card.style.display = 'none'
    }
  })
  
  close_btn.addEventListener('click', e => {
    card.style.display = 'none'
  })
</script>

БЛОГ НА HUSL

Не срабатывает обработчик addEventListener

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