Как открывать одно модальное окно (popup) несколькими одинаковыми кнопками на странице?

Question

[Боб Семович]

У меня есть JS сод который открывает модальное (popup) окно. Кнопка по которой я кликаю, что бы открыть popup — это .product__btn. Однако на странице у меня несколько кнопок с классом .product__btn .
Мне нужно, что бы при нажатии на каждую из этих кнопок открывалось одно и тоже модальное окно. Проблема в том, что работает только 1-ая кнопка, а остальные нет. Как это сделать, что поменять? Подскажите пожалуйста.

const openModal = (triggerSelector, modalDataSelector) => {
		const trigger = document.querySelector(triggerSelector)
		const modal = document.querySelector(modalDataSelector)
		if (!trigger || !modal) return
		trigger.addEventListener('click', e => {
			e.preventDefault()
			modal.classList.add('popup_open')
		})
	}
	openModal('.product__btn', '.popup[data-modal="popupProduct"]')

	const closeModal = () => {
		const modals = document.querySelectorAll('.popup')
		if (!modals) return
		modals.forEach(el => {
			el.addEventListener('click', e => {
				if (e.target.closest('.popup__close')) {
					el.classList.remove('popup_open')
				}
				if (!e.target.closest('.popup__wrap')) {
					el.classList.remove('popup_open')
				}
			})
		})
	}
	closeModal()

Answer 1

[Боб Семович]

Решил проблему так:

const openModal = (triggerSelector, modalDataSelector) => {
		const trigger = document.querySelectorAll(triggerSelector)
		const modal = document.querySelector(modalDataSelector)
		if (!trigger || !modal) return
		trigger.forEach(b => b.addEventListener('click', closeParentBlock));
		
		
		function closeParentBlock(e) {
			e.preventDefault()
			modal.classList.add('popup_open')
		}
		
		
	}
	openModal('.product__btn', '.popup[data-modal="popupProduct"]')

Answer 2

[scottparker]

попробуй так

const trigger = document.querySelectorAll(triggerSelector)

Comments

[Боб Семович]

Не подходит. Теперь никакая кнопка не работает. Даже первая

[Loli E1ON]

Вечков Александр, подходит, просто querySelectorAll возвращает NodeList по которому нужно проитерироваться и назначить листенер на каждый элемент.

[Боб Семович]

Loli E1ON, простите, но я не понял. проитерироваться? Листнер?

[scottparker]

Вечков Александр,

const allTrigger = document.querySelectorAll(triggerSelector);
...
allTrigger .forEach(function(trigger) {
  //листенер для каждого trigger
});

[Loli E1ON]

Вечков Александр, проитерироваться - пройтись циклом по массиву. Назначить листенер - добавить ваш addEventListener на каждый элемент массива