Как через DOM дерево при нажатии на кнопку высвечивался alert с моим текстом и текстом html элемента?

Question

let arrFish = document.getElementsByClassName('fish-list-card-name')

function eventAlertClick (e) {
  console.log()
  alert (`Подтвердите, что хотите купить рыбу`) 
}

let eventClick = document.querySelectorAll('button')

for (let i = 0;i < eventClick.length; i++) {
  eventClick[i].addEventListener('click', eventAlertClick)
}

// 1 строчка это массив имен рыб, не понимаю как мне развесить на кнопке alert и обращаться к конкретной рыбе на странице, не меняя разметку html

Answer 1

addEventListener(`click`, e => {
  if (!e.target.classList.contains(`buy-fish`)) return;

  alert(`Подтвердите, что хотите купить ${e.target.dataset.name}?`);
});

div {
  margin-bottom: 1rem;
  border: 1px solid purple;
  padding: 1rem;
}

<div>
  Окунь
  <button data-name='окунёв' class='buy-fish'>Купить</button>
</div>
<div>
  Карась
  <button data-name='карасёв' class='buy-fish'>Купить</button>
</div>
<div>
  Щука
  <button data-name='щуков' class='buy-fish'>Купить</button>
</div>

БЛОГ НА HUSL

Как через DOM дерево при нажатии на кнопку высвечивался alert с моим текстом и текстом html элемента?

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