В цикле 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?
- какие еще методы перечисления элементов могут быть?

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)