Проблемы с html и javascript?

Question

[Dom Alfro]

javaScript через цикл генерирует мне html код кнопки:

let box_h, item, co, staf;
co = document.querySelector(".boots");

function g_global() {
	//
	box_h = "";
	item = 5;
	//
	for(i = 0; i <= item; i++) {
		box_h += '<div class="push"><button>нажми</button></div>'
	}
	//
	co.innerHTML = box_h;

}
g_global();

staf = document.querySelectorAll(".push").onclick = function () {
	console.log("good");
};

Проблема заключается в том, что я не могу повесить на кнопку событие, которая генерируется в цикле ( console.log - ошибки не показывает - но и реакции тоже на функцию нет я уже пробовал и через евент листенер - мысль о том что он просто не видит на ходу и не понимает что я от него хочу.

Comments

[Stalker_RED]

вы в самом деле хотите слушать клики не у кнопки, а у обертки с классом push?

[Dom Alfro]

Stalker_RED, я просто не пойму как люди делают корзину где у них рядом с товаром, суммой - есть кнопка + и кнопка - которая может добавлять или удалять текущий товар.

Answer 1

[Алексей Ярков]

Так в querySelectorAll лежит коллекция, а не конкретный элемент. Пройдись циклом по коллекции и каждому элементу навесь обработчик.
P.S. А что вы хотели получить в переменную staf?

Comments

[Dom Alfro]

перегрев - сам не знаю но зачем то хотел ... может реально забыл

Answer 2

[Stalker_RED]

Comments

[Dom Alfro]

не знаю сколько лет вы в разработке - вы явно монстр - надо завязывать быть одиноким слабым фулл стаком и работать в команде уже ( к сожалению у нас не учат всем тонкостям и подходам ) Спасибо большое !

[Stalker_RED]

Вячеслав Коростин, этот подход называется "делегирование обработки событий", и является частным случаем паттерна "делегирование (или делегат)".

Я не знаю чему учат "у вас" но оно есть в большинстве учебников (1, 2).

И да, я тоже склонен считать себя довольно слабым фуллстеком. Но веб-разработке лет пятнадцать, успел запомнить пару приемчиков и немножко книжек прочел.

[Stalker_RED]

Вячеслав Коростин, добавил более развернутый пример

[Dom Alfro]

Stalker_RED, спасибо вам большое за ваше внимание и помощь вы мне очень помогли я понял что нужно внимательнее читать информацию ( вот я читал там много раз а так и не увидел ) прям пламенная благодарность !

Answer 3

[twobomb]

let box_h, item, co, staf;
co = document.querySelector(".boots");

staf = function(){
   document.querySelectorAll(".push").forEach((e)=>{
   	e.addEventListener("click",(ev)=>{
    console.log("good")
    },false);
   })
}
function g_global() {
  //
  box_h = "";
  item = 5;
  //
  for(i = 0; i <= item; i++) {
    box_h += '<div class="push"><button>нажми</button></div>'
  }
  //
  co.innerHTML = box_h;
  staf();

}
g_global();

Comments

[Dom Alfro]

спасибо большое - вообще не когда бы не додумался на такое решение !
сложно )