Как правильно перебрать querySelectorAll?

Question

[Богдан]

Помогите реализовать такую задачу, есть страница на данной странице есть N количество блоков, в каждом этом блоке есть кнопка и текст при нажатии на данную кнопку должен извлекается текст и доставляться в . Есть скрипт но он работает только если такая кнопка одна. Подскажите как перебрать все эти кнопки которые в "querySelectorAll" чтобы работало для всех кнопок.
Вот пример реализованный для одной кнопки:
https://jsfiddle.net/BodyaFlesh/vwyvsx9z/
Реализовать нужно именно на чистом JS.
Заранее спасибо за помощь.

Answer 1

[Mikhail Osher]

Решать за Вас не буду, но подскажу.

1) Получаете элементы через querySelectorAll
2) Преобразуете в массив - Array.prototype.slice.call(result)
3) Идете циклом forEach и вешаете обработчик на каждый элемент

Comments

[Mikhail Osher]

Артём Петренков: само собой, for - наше всё.)

Answer 2

[Петр]

var but = document.querySelectorAll('div > .click');
for (var b in but)
but[b].onclick = function(){
  var father = this.parentNode;
  var a = father.querySelector('h2').innerHTML;
  document.querySelector('div#modal input').value = a;
};

Comments

[Богдан]

Работает спасибо, только вы фигурные скобки загубили.

[Петр]

Богдан: Что загубил? ))

[Богдан]

var but = document.querySelectorAll('div > .click');
for (var b in but){
but[b].onclick = function(){
var father = this.parentNode;
var a = father.querySelector('h2').innerHTML;
document.querySelector('div#modal input').value = a;
};
}

[Петр]

Богдан: Операторы if, for, while и т.п. требуют наличие одной строки кода, что завершается ';' или блока кода '{...}'. Так что указанный вами блок излишен, мой код был равнозначен
for (var i in btns) btns[i].onclick = function(){ ... };

Answer 3

[Антон Жуков]

caniuse.com/#feat=queryselector не работает на некоторых safari, неочень старом андроиде и ещё кое-где.

Answer 4

[Алексей Струков]

Если кнопок будет не очень много на странице, то можно просто в хтмл написать у кнопки аттрибут: onclick="myFunction(this)"
myFunction(but) в джаваскрипте соответственно будет получать кнопку из которой можно внутри функции достать innerHTML и делать с ним что угодно дальше.