Назначить обработчики событий для динамически создаваемых кнопок

Question

Я пытаюсь назначить обработчик события нажатия для динамически создаваемых кнопок, которые после нажатия вернут идентификатор нажатой кнопки в ванильном Javascript без каких-либо платформ.И все же я не могу заставить события обрабатываться правильно, вот код

let h = document.getElementsByClassName("buttons");

h.forEach(function() {
	addEventListener("click", function() {
		alert(this.id);
	});
};

Answer 1

Метод document.getElementsByClassName() возвращает и HTMLCollection , который является массивоподобным объектом (но не является массивом ), поэтому вы не можете использовать forEach() на нем, чтобы перебрать его элементы.Вместо этого вы можете использовать цикл for:

let h = document.getElementsByClassName("buttons");

for (let i = 0; i < h.length; i++)
{
    h[i].addEventListener("click", function()
    {
        alert(this.id);
    });
}

<button id="id1" class="buttons">BUTTON 1</button>
<button id="id2" class="buttons">BUTTON 2</button>

Кроме того, вы можете spread его элемент в массиве, а затем использовать forEach() для него:

let h = document.getElementsByClassName("buttons");

[...h].forEach(function(btn)
{
    btn.addEventListener("click", function()
    {
        alert(this.id);
    });
});

<button id="id1" class="buttons">BUTTON 1</button>
<button id="id2" class="buttons">BUTTON 2</button>

Answer 2

Попробуйте

let h = document.getElementsByClassName("buttons");

[...h].forEach(b => {
  b.addEventListener("click", () => {
    alert(b.id);
  });
});

<button id="btn-id-1" class="buttons">Btn 1</button>
<button id="btn-id-2" class="buttons">Btn 2</button>
<button id="btn-id-3" class="buttons">Btn 3</button>

Answer 3

let h = document.getElementsByClassName("buttons");

h.forEach(function(element) {
    element.addEventListener("click", function() {
        alert("Hello");
    });
};