CSS-селектор для всех кнопок с классом

Question

Я делаю модель для своей целевой страницы и хочу вызвать одну модель несколькими кнопками.Но я не могу использовать каждую кнопку, она работает только для первой кнопки.

Разметка

 <button class="trigger" class="pricing_button single_button" >BUY</button>

JS Script

var modal = document.querySelector(".modal");
    var trigger = document.querySelector(".trigger");
    var closeButton = document.querySelector(".close-button");

    function toggleModal() {
        modal.classList.toggle("show-modal");
    }

    function windowOnClick(event) {
        if (event.target === modal) {
            toggleModal();
        }
    }
    trigger.addEventListener("click", toggleModal);
    closeButton.addEventListener("click", toggleModal);
    window.addEventListener("click", windowOnClick);

Мой кодработает только для первой кнопки.Я проверил онлайн и обнаружил document.querySelectorAll, но это также не решает проблему.

Answer 1

Я думаю, вы ищете document.querySelectorAll API .следующий код должен помочь:

var allTriggers = document.querySelectorAll(".trigger, .close-button");
Array.from(triggers).formEach(trigger => {
  trigger.addEventListener("click", toggleModal);
});