JS - text output to the modal window-CodePudding

> sorry for my english)

In a nutshell: need to pass the text when the button is clicked into a modal window

Hi all. I have a product card, and I need to make it so that when the button is pressed, information from product description is transmitted - to the modal window. Tried to do it through innerHTML/outerHTML, but the description from one card - is passed to all modal windows. The title in the card can be unique, respectively - in each modal window should be a unique title. For each card to create its own window - not rational, therefore, please help))

P.s. Such a mechanism can easily be turned around in jQuery, like this:

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

But, I would not like to connect jQuery for the sake of it, so I would like to implement this functionality in native js

Here, by the way, is my unsuccessful attempt to implement it:

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);

      });

  });

HTML:

Product cards:

<div >
   <div >
     <div >
       <img src="" alt="" >
          <div >Watches</div>
          <div >description</div>
      </div>
    </div>
  <button -data-modal="order" >Buy</button>
  </div>
 </div>
<div >
  <div >
     <div >
        <img src="" alt="" >
           <div >Shoes</div>
           <div >description</div>
     </div>
   </div>
   <button -data-modal="order" >Buy</button>
 </div>
</div>

Modal window:

<div  id="order">
        <div >&times;</div>
        <div >Your order:</div>
        <div >Descr/Title from card</div>
</div>

CodePudding user response：

You can fix this with event delegation. This means adding a single event listener that listens for all the lements in the page. In the event handler, check if the clicked element is the .button_mini inside of a .catalog-item. If so, then read the text from the catalog-item__subtitle element and set it to the .modal__descr element.

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;
  }

  // Select the .catalog-item related to the .button_mini. From there get the subtitle.
  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');
});