Как в обработчике событий воспользоваться несколькими одинаковыми элементами?

Question

[BooBoo1466]

Всем привет!
Оговорюсь сразу,если вопрос не совсем соответствует проблеме,то прошу прощение,это сделано ненамеренно.

Задача:
На карте есть кнопка (главный пин), при нажатии на него отрисовываются остальные кнопки (пины). А далее нужно,чтобы при нажатии на любой из элементов .map__pin ему должен добавляться класс map__pin--active и должен показываться элемент .popup (открытие попапа сделал). Если до этого у другого элемента существовал класс pin--active, то у этого элемента класс нужно убрать.

В чем проблема?
Сначала,я нахожу все элементы на странице с помощью querySelectorAll,потом вешаю обработчик событий клика на пины. Но консоль выдает ошибку screenshot.su/show.php?img=14a5a63eac273ced575638b... Причину найти было не трудно: надо просто воспользоваться querySelector, но мне нужны все элементы, как быть?

Код:
https://jsfiddle.net/2fryp3oL/

За любую помощь спасибо!

Answer 1

[Stalker_RED]

querySelectorAll возвращает не один элемент, а список (NodeList) со всеми найденными. И конечно-же у списка нет метода addEventListener. Можно перебрать список циклом, и повесить обработчик на каждый

otherPins.forEach(function(item) {
    item.addEventListener('click', activePinElement);
});

или делегировать обработку клика родительскому элементу.