JS - вывод текста в модальное окно

Question

Всем привет. У меня есть карточка товара, и необходимо сделать так, чтоб при нажатии кнопки передавалась информация с описания товара - в модальное окно.

Пытался сделать это через innerHTML/outerHTML, но описание из одной карточки - передается на все модальные окна. Тайтл в карточке может быть уникальным, соотвественно - в каождом модальном окне должен быть уникальный тайтл.

Для каждой карточки свое окно создавать - не рационально, по этому прошу помощи)) В общем, в html - примерно такая структура:

Карточки товаров:

<div class="catalog-item">
                <div class="catalog-item__wrapper">
                    <div class="catalog-item__content">
                        <img src="" alt="" class="catalog-item__img">
                            <div class="catalog-item__subtitle">Наручные часы</div>
                            <div class="catalog-item__descr">описание</div>
                    </div>
                </div>
                    <button -data-modal="order" class="button button_mini">Купить</button>
                </div>
            </div>
<div class="catalog-item">
                <div class="catalog-item__wrapper">
                    <div class="catalog-item__content">
                        <img src="" alt="" class="catalog-item__img">
                            <div class="catalog-item__subtitle">Кожаные ботинки</div>
                            <div class="catalog-item__descr">описание</div>
                    </div>
                </div>
                    <button -data-modal="order" class="button button_mini">Купить</button>
                </div>
            </div>

Модальное окно:

<div class="modal" id="order">
        <div class="modal__close">&times;</div>
        <div class="modal__subtitle">Ваш заказ:</div>
        <div class="modal__descr">Тут должен быть тайтл\описание из карточки</div>
</div>

P.s. Такой механизм легко проворачивается в jQuery, примерно таким образом:

$('.button_mini').each(function(i)) {
$(this).on('click', function() {
    $('#order .modal_descr').text($('.catalog-item__subtitle').eq(i).text());
    
})}

Но, мне не хотелось бы подключать jQuery ради этого, по этому хотелось бы реализовать подобный функционал на нативном js

Вот, кстати моя неудачная попытка попытка реализовать это:

document.querySelectorAll(".button_mini").forEach(item => {
    item.addEventListener('click', function () {
        document.querySelector('.overlay').classList.add('is-visible');
        document.querySelector("#order").classList.add('is-visible');
        document.querySelector('.modal__descr').outerHTML = (document.querySelector('.catalog-item__subtitle').item.outerHTML);

    });

});

Answer 1

Мне помогли решить проблему с помощью делегирования событий

const modal = document.querySelector('#order');
const modalDescription = modal.querySelector('.modal__descr');
const overlay = document.querySelector('.overlay');

document.addEventListener('click', event => {
  const isButtonMini = event.target.matches('.catalog-item .button_mini');

  if (!isButtonMini) {
    return;
  }
  const parent = event.target.closest('.catalog-item');
  const subtitle = parent.querySelector('.catalog-item__subtitle');

  modalDescription.textContent = subtitle.textContent;

  modal.classList.add('is-visible');
  overlay.classList.add('is-visible');
});

Answer 2

После того, как циклом пробежали по кнопкам, слушаете клик. И потом вы ищите document.querySelector('.catalog-item__subtitle') НО document.querySelector - находит первый элемент с таким классом, и дальше не ищет. То есть в вашем случае при клике на любую кнопку вы всегда находите <div class="catalog-item__subtitle">Наручные часы</div>.

Вам после клика на кнопку нужно найти родителя, чтобы в нем найти заголовок item.closest('.catalog-item') - нашли родителя и потом ищете заголовок wrap.querySelector('.catalog-item__subtitle')

Пример:

document.querySelectorAll(".button_mini").forEach(item => {
  item.addEventListener('click', function() {
    const wrap = item.closest('.catalog-item')
    document.querySelector('.modal__descr').textContent = wrap.querySelector('.catalog-item__subtitle').textContent;
  });

});

<div class="catalog-item">
  <div class="catalog-item__wrapper">
    <div class="catalog-item__content">
      <img src="" alt="" class="catalog-item__img">
      <div class="catalog-item__subtitle">Наручные часы</div>
      <div class="catalog-item__descr">описание</div>
    </div>
  </div>
  <button -data-modal="order" class="button button_mini">Купить</button>
</div>
</div>
<div class="catalog-item">
  <div class="catalog-item__wrapper">
    <div class="catalog-item__content">
      <img src="" alt="" class="catalog-item__img">
      <div class="catalog-item__subtitle">Кожаные ботинки</div>
      <div class="catalog-item__descr">описание</div>
    </div>
  </div>
  <button -data-modal="order" class="button button_mini">Купить</button>
</div>
</div>

<div class="modal" id="order">
  <div class="modal__close">&times;</div>
  <div class="modal__subtitle">Ваш заказ:</div>
  <div class="modal__descr">Тут должен быть тайтл\описание из карточки</div>
</div>

БЛОГ НА HUSL

JS - вывод текста в модальное окно

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