Почему не работает код?

Question

[Crushing]

Не работает данный js код:

var townHover = document.getElementsByClassName('town_hover');

townHover.onclick = function() {
	alert('thx');
};

На этом сайте: https://uzinouzi.github.io/Polind/

По идее этот код должен собрать элементы с классом town_hover и при клике на данный элемент вывести алерт, но не выходит :(

Answer 1

[Toasts]

`townHover` это массив.
Такой код должен сработать:

var townHovers = document.getElementsByClassName('town_hover');

Array.from(townHovers).forEach((btn) => {
  btn.addEventListener('click', () => alert('thx'));
});

Comments

[Михаил Кисиль]

или так
https://jsfiddle.net/7cgkxojg/

[Crushing]

Михаил Кисиль, Можете разъяснить? var i in townHovers

[vetsmen]

Crushing, townHover - твой массив, i - индекс массива, у тебя в цикле for пробегаются все существующие элементы массива и накидывается обработчик onclick на каждый

[Михаил Кисиль]

На всякий случай вставлю код сюда:

var townHover = document.getElementsByClassName('town_hover');
for (var i in townHover) {
    townHover[i].onclick = function() {
    	alert('lalal');
    }
}

Просто на сколько я понимаю, привязывать события нужно к каждому элементу. Соответственно мы по циклу получаем номер каждого элемента массива и подставляем этот номер(i) - townHover[i], обращаясь к этому элементу.