Смена стиля по клику?

Question

[Александр]

На странице расположены допустим пять кнопок, в разных местах.
Одна "связаться", другая "написать" и т.д.
Т.е. все они открывают одно и тоже - форму обратной связи.
Можно позадавать всем разные id, и открывать с помощью getElementById, но это как-то...
Поэтому хочу чтобы у всех кнопок был общий класс, например openform
Слепил такую конструкцию:

document.querySelector('.openform').onclick = function(){ 
document.getElementById('form-box').classList.add('open-main-box');}

...но она работает только с первой кнопкой на странице
А такая:

document.querySelectorAll('.openform').onclick = function(){ 
document.getElementById('form-box').classList.add('open-main-box');}

...не работает вообще
Подскажите, в чём тут ошибка.

Answer 1

[eternalfire]

потому что цикл

var inputs = document.querySelectorAll(".openform");
for (i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('click', function() {
    this.style.width = "500px";
  });
}

Comments

[Александр]

Спасибо, заработало )

Answer 2

[skuvaWeb]

Дело в том, что метод document.querySelector('.className') возвращает один Node элемент,
а document.querySelectorAll('.className') возвращает коллекцию Node элементов, которые нужно перебрать в цикле, чтобы на каждый повесить обработчик

Comments

[Александр]

Спасибо за объяснение )