Не находит элементы созданные js?

Question

[Максим]

Добрый день.
Проблема следующая, на сайте формирую из JSON файла, карточки товара и модальные окна с помощью скрипта generateHouse.js, модальные окна открываются скриптом modal.js.
Файлы подключены "script/generateHouse.js" defer вверху страницы, "script/modal.js" defer внизу.
Пробовал скрипт модал обернуть window.onload = function () { modal.js code }; , уже видит элементы, но клик не срабатывает.
Помогите понять в чем проблема. (я грешу на асинхронность), Хотелось бы, что бы JSON был отдельным файлом. Когда все переписываю в один файл все работает.
codesandbox

JSON

[
  {
    "id": 2,
    "name":"Неаполь 162",
    "houseArea":"159",
    "price":"2,5"
  },
  {
    "id": 1,
    "name":"Неаполь 161",
    "houseArea":"169",
    "price":"2,5"
  },
  {
    "id": 3,
    "name":"Неаполь 163",
    "houseArea":"29",
    "price":"2,5"
  },
  {
    "id": 4,
    "name":"Неаполь 161",
    "houseArea":"159",
    "price":"2,5"
  },
  {
    "id": 5,
    "name":"Неаполь 161",
    "houseArea":"159",
    "price":"2,5"
  }
]

generateHouse.js

const URL = '/script/house.json';

async function getHouse(url) {
   const resp = await fetch(url);
   const respData = await resp.json();

   // генерация карточек на странице
   const catalogList = document.querySelector('.catalog__list');

   respData.forEach(item => {
      const { name, price, id, houseArea } = item;

      catalogList.insertAdjacentHTML('beforeEnd', `
      <li class="catalog__item">
         <img src="img/house/house01.jpg" alt="" class="catalog__img" />
         <div class="catalog__inner">
            <h4 class="catalog__name">Тип: ${name}</h4>
            <p class="catalog__place">
            Площадь дома: <span class="green">${houseArea} м<sup>2</sup></span>
            </p>
            <h3 class="catalog__cost">Цена: <span class="green">от ${price} млн. рублей</span></h3>
            <button class="catalog__button button" data-modal-id="modal-${id}" data-modal-title="${name}">Посмотреть планировку</button>
         </div>
      </li>
      `);
   });

   // генерация модальных окон
   const modalList = document.querySelector('.modal__list');

   respData.forEach(item => {
      const { name, price, id } = item;

      // let propertie = '';

      // properties.forEach((item) => {
      //    propertie += `
      //       <li class="modal__item">${item}</li>
      //       `;
      // });

      modalList.insertAdjacentHTML('beforeEnd', `
         <div id="modal-${id}" class="modal _hidden">
            <div data-modal-exit class="modal__bg"></div>
            <div class="modal__window">
            <span data-modal-exit class="modal__exit"></span>
            <div class="modal__wrapper">
               <div class="modal__col">
                  <img src="img/house/house01/house01.jpg" alt="" class="modal__img" />
                  <img src="img/house/house01/house01_01.jpg" alt="" class="modal__img modal__img--more" />
               </div>
      
               <div class="modal__col">
                  <h5 class="modal__title">Тип: "${name}"</h5>
                  <ul class="modal__info modal__info--general">
                  <li class="modal__item">
                     Строительная площадь дома: <span>83 м<sup>2</sup></span>
                  </li>
                  <li class="modal__item">
                     Полезная (внутренняя) площадь: <span>69,76 м<sup>2</sup></span>
                  </li>
                  <li class="modal__item">
                     Доп. строительная площадь: <span>12,5 м<sup>2</sup></span>
                  </li>
                  </ul>
                  <p class="modal__info-title">Планировка дома:</p>
                  <ul class="modal__info modal__info--more">
                  <li class="modal__item modal__item--badge">3 спальни, кухня, гостинная,санузел, терраса и подвал</li>
                  </ul>
                  <p class="modal__info-title">Планировка дома:</p>
                  <ul class="modal__info modal__info--more">
                  <li class="modal__item modal__item--badge">Тёплый водяной пол</li>
                  <li class="modal__item modal__item--badge">Электричество 15 кВт</li>
                  <li class="modal__item modal__item--badge">Водопровод, канализация, отопление</li>
                  <li class="modal__item modal__item--badge">Выполнена предчистовая отделка</li>
                  </ul>
                  <h6 class="modal__cost">Цена: <span>от ${price} млн. рублей</span></h6>
                  <button data-modal-exit class="button b24-web-form-popup-btn-3">Заказать звонок</button>
               </div>
            </div>
            </div>
         </div>
      `);
   });
}

getHouse(URL);

modal.js

const openModalElems = document.querySelectorAll("[data-modal-id]");
console.log('openModalElems: ', openModalElems);
// Находим открывающие элементы
const closeModalElems = document.querySelectorAll("[data-modal-exit]");
// Находим закрывающие элементы
const modalElems = document.querySelectorAll(".modal");
// Находим модальные окна

function openModal() {
  // функция открытия модального окна

  let modalId = this.getAttribute("data-modal-id");
  console.log('modalId: ', modalId);
  // Считываем id модального окна, хранящееся в data атрибуте кнопки
  let modalTitle = this.getAttribute("data-modal-title");
  // Считываем заголовок, хранящийся в data атрибуте кнопки
  let modalSubject = this.getAttribute("data-modal-subject");
  // Считываем тему письма, хранящуюся в data атрибуте кнопки

  modalElems.forEach((item) => {
    // перебираем все модальные окна
    if (item.getAttribute("id") === modalId) {
      // если id модального окна === id из дата атрибута нажатой кнопки
      // Тогда идем дальше

      if (modalId !== "modal-thx") {
        // Если id модального окна НЕ modal-thx, тогда
        // вызываем функцию замены заголовка и темы письма
        chageModalParams(modalId, modalTitle, modalSubject);
      }

      item.classList.remove("_hidden");
      // Удаляем класс _hidden у нужного модального окна
    }
  });
}

function closeModal() {
  // Функция закрытия модального окна
  // let modalId = this.getAttribute('data-modal-id');
  // Считываем id модального окна, хранящееся в data атрибуте кнопки

  modalElems.forEach((item) => {
    if (!item.classList.contains("_hidden")) {
      // Если модальное окно не содержит класс _hidden, то мы его добавляем
      item.classList.add("_hidden");
    }
  });
}

document.addEventListener("DOMContentLoaded", () => {
  closeModalElems.forEach((item) => {
    item.addEventListener("click", closeModal);
    // Вешаем событие на клик по открывающим кнопкам
  });

  openModalElems.forEach((item) => {
    item.addEventListener("click", openModal);
    // Вешаем событие на клик по открывающим кнопкам
  });
});

в одном файле

const housesArray =
   [
      {
         "id": 2,
         "name": "Неаполь 162",
         "houseArea": "159",
         "price": "2,5"
      },
      {
         "id": 1,
         "name": "Неаполь 161",
         "houseArea": "169",
         "price": "2,5"
      },
      {
         "id": 3,
         "name": "Неаполь 163",
         "houseArea": "29",
         "price": "2,5"
      },
      {
         "id": 4,
         "name": "Неаполь 161",
         "houseArea": "159",
         "price": "2,5"
      },
      {
         "id": 5,
         "name": "Неаполь 161",
         "houseArea": "159",
         "price": "2,5"
      }
   ];

// генерация карточек на странице
const catalogList = document.querySelector('.catalog__list');

housesArray.forEach(item => {
   const { name, price, id, houseArea } = item;
catalogList.insertAdjacentHTML('beforeEnd', `
      <li class="catalog__item">
         <img src="img/house/house01.jpg" alt="" class="catalog__img" />
         <div class="catalog__inner">
            <h4 class="catalog__name">Тип: ${name}</h4>
            <p class="catalog__place">
            Площадь дома: <span class="green">${houseArea} м<sup>2</sup></span>
            </p>
            <h3 class="catalog__cost">Цена: <span class="green">от ${price} млн. рублей</span></h3>
            <button class="catalog__button button" data-modal-id="modal-${id}" data-modal-title="${name}">Посмотреть планировку</button>
         </div>
      </li>
      `);
});

 ...
});

Спасибо

Comments

[WapSter]

https://codesandbox.io/ быстрее ответят

[Максим]

WapSter, https://codesandbox.io/s/trusting-booth-hvs3p?from...

[WapSter]

Максим,

closeModalElems.forEach((item) => {
    item.addEventListener("click", closeModal);
    // Вешаем событие на клик по открывающим кнопкам
  });

  openModalElems.forEach((item) => {
    item.addEventListener("click", openModal);
    // Вешаем событие на клик по открывающим кнопкам
  });

Проблема в этом. На момент когда ты вешаешь обработчики, элементов еще нет. Используй делегирование событий, да и всегда старайся его использовать, вместо циклов

[Максим]

WapSter, спасибо переписал на это, плюс маленькие правки в самом файле

window.onload = function () {
  document.addEventListener('click', clickDelegation);

  function clickDelegation(e) {
    const targetElement = e.target;

    if (targetElement.classList.contains('catalog__button')) {

      openModal(targetElement);
    }

    if (targetElement.classList.contains('modal__exit') ||
      targetElement.classList.contains('modal__bg')) {

      closeModal(targetElement);
    }
  }
};