Создать несколько кнопок с помощью ClickListener и определить, какая кнопка была нажата? (JavaScript)

#javascript #logic

#javascript #Логические

Вопрос:

Подумайте о логике карточной игры Uno, например, как я могу получить выбранную карту в руке игрока, когда я создаю карты в руке игрока динамически, нажимая на кнопку розыгрыша?

что-то вроде:

 var btn = document.createElement("BUTTON");
btn.onclick = () => {
  alert(btnCounter);
}
btnCounter  ;

но функция onclick должна быть записана один раз, а затем сохранена для этой кнопки.

1. Просто сохранить отдельную привязку для btnCounter в другой переменной?

2. Почему вы хотите сделать только так, вы также можете привязать событие onclick, если вы динамически включаете кнопку в html через JS. Нравится <button onclick='yourFunction()'>

Ответ №1:

Один из вариантов — полагаться на пузырящееся событие. Мы можем добавить прослушиватель событий в контейнер для нашей руки, а затем, по щелчку, убедиться, что нажатый элемент был кнопкой. В этом примере я помещаю значение нашей карты в набор данных кнопки, но вы можете получить информацию из любого места на цели.

 const hand = document.querySelector("#hand");

hand.addEventListener("click", function(e) {
  if (e.target.tagName !== "BUTTON") return;
  console.log(e.target.dataset.card);
});

function drawCards(numberOfCards) {
  for (let i = 0; i < numberOfCards; i  ) {
    const button = document.createElement("button");
    const card = Math.floor(Math.random() * 10);
    button.setAttribute("data-card", card);
    button.innerHTML = card;
    hand.appendChild(button);
  }
};

drawCards(5);

 <div id="hand"></div>

Развернуть фрагмент

1. но если я выберу hand.removeChild(hand.childNodes[click.target.dataset.card]); индексация, похоже, перепутана, как я могу удалить элементы и переиндексировать кнопки?

2. Вы хотите удалить дочерний элемент при нажатии? В основном в то же время, когда она регистрируется в моем примере?

3. Если это так, вы можете просто сделать e.target.remove() !

Ответ №2:

В контексте, в котором создается кнопка (и ее идентификатор), привяжите идентификатор в функции часов…

 const ids = ['1', '2', '3'];
var parent = document.getElementById('parent')

ids.map(id => {
  let btn = document.createElement('button');
  btn.setAttribute('id', id)
  btn.innerHTML = `Button ${id}`
  parent.appendChild(btn)
  btn.onclick = event => {
    alert(id)
  }
})

 <div id="parent">
</div>

Развернуть фрагмент