В цикле for много кнопок как сделать .addEventListener('click', к каждой кнопке?

Question

[Dazle_Prg]

Если я разместил 1 обычный html код с кнопкой то код работает с циклом for нет, и хорошо было бы передать значение в ней.

let polz = <%- polz %>;
let p = 0;

for(p; p < polz.length; p++) {
polz2.innerHTML += '<div id="plus"><img src="p14.png"/>'+polz[p].name+'</div>';
}

/* +1 к рейтингу */

if(document.getElementById('plus')){
plus.addEventListener('click', () => {

console.log('нажал на кнопку');
});
}

Ошибку выдает Uncaught TypeError: plus.addEventListener is not a function

Comments

[ksnk]

Для начала - почитать что-нибудь про javascript. Если совсем невтерпеж - спросить у чатГпт, как сделать вот эту вот конкретно задачу. Его код не всегда делает то, что надо, но, обычно, он не содержит ошибок синтаксиса.

Ну и вопросы, на которые нужно подумать и дать ответ
- откуда появляется переменная plus?
- сколько может существовать элементов с одинаковым id?
- какие еще методы перечисления элементов могут быть?

[Александр]

ksnk, элементы с id доступны как глобальные переменные

[ksnk]

Александр,

Uncaught TypeError: plus.addEventListener is not a function

Точно доступны как глобальные переменные? Очевидно, последняя переменная не очень то глобальна получилась.

[Александр]

ksnk, Вот если id уникальный, то будет глобально доступно, я даже проверил перед тем как писать, что так и есть

Answer 1

[Антон Иванов]

1. У вас plus нигде не определен. Вы его ищете с помощью getElementById, но не сохраняете в переменную plus.
2. Почитайте про делегирование событий https://learn.javascript.ru/event-delegation. Это именно то, что вам нужно.

Comments

[Dazle_Prg]

Цикл for в JavaScript не «делегируется» нашел такое в интернете у меня в цикле for все кнопки, мне другой способ искать как отобразить массив.

[Aleksey Solovyev]

Dazle_Prg, ссылку на статью

[Михаил Ливач]

Dazle_Prg, вы в интернете столько всего найти можете.. Один из крупных недостатков Рунета - редко проставляют дату публикации. Поэтому запросто можно найти древние материалы, которые уже неактуальны, и древние инструкции, которые уже не работают.

Answer 2

[Rsa97]

id элемента должен быть уникальным в пределах одного документа. Вы создаёте много элементов с одним и тем же id, так делать нельзя. Если нужен способ выделения множества однотипных элементов, то используйте class.
Для назначения обработчика можно использовать всплытие событий (делегирование), как уже написал Антон Иванов, либо querySelectorAll() с обходом полученного списка через foreach.

Answer 3

[SagePtr]

Если у них общий родительский элемент, то может быть проще навесить один метод на родительский элемент, а уже в методе проверять, какой потомок был нажат (event.target)