Не работает простой onclick?

Question

[Mesuti]

Привет!
Почему может не работать простой onclick ?

<button class="btn">Первая кнопка</button>
<button class="btn">Вторая кнопка</button>

<script>
   var b = document.getElementsByClassName('.btn');
    b.onclick = function() {
        alert( 'Клик!' );
    };
</script>

Answer 1

[alex]

Во-первых

var b = document.getElementsByClassName('btn'); // без точки

Во-вторых

.getElementsByClassName() возвращает коллекцию элементов (button). Нужно пройтись циклом по этой колекции и каждой button повесить обработчик onclick

Array.prototype.forEach.call(b, function(button) {
	button.onclick = function(){
  	alert('Клик!');
  }
});

Comments

[Mesuti]

Спасибо!
Нашел еще одно решение:

var b = document.getElementsByClassName('btn')[0];
    b.onclick = function(){alert( 'Клик!' );};

Подскажете, как указать несколько элементов массива?

[alex]

Александр Сорокин, не очень понятно что вы хотите сдлеать. повесить onclick на массив кнопок у вас все равно не получится, нужно будет перебирать массив и вешать обработчик на каждую кнопку отдельно

[Mesuti]

Alex, имею ввиду, как вывести конкретные значения из этого же массива, допустим первое и второе?

var b = document.getElementsByClassName('btn')[0]; // выбрано первое значение, как добавить еще второе?

[alex]

Александр Сорокин, var b2 = document.getElementsByClassName('btn')[1]

Answer 2

[Евгений Кузовлев]

https://codepen.io/anon/pen/OEvKMe

Answer 3

[Егор Живагин]

А вы на всю коллекцию элементов разом повесить хотите? Не выйдет
Перебирайте в цикле, вешайте на каждый

Answer 4

[Иван]

Если вы поискали, то тут множество раз задавали этот вопрос :)

document.getElementsByClassName возвращает псевдомассив DOM элементов которые имеют заданный class.
Потому если нужно повесить на всё элементы,то пройдитесь циклом и повесьте обработчики на все элементы.

Если нужен только один элемент с заданным классом,то воспользуйтесь document.querySelector;