Как сделать, чтобы несколько кнопок вызывали одно и то же модальное окно?

Question

[SiO4]

Доброго дня. Вопрос простой, есть две кнопки, вычитал, что нужно захватывать с помощью quarySelectorAll и обрабатывать с помощью forEach. Но что-то у меня не работает, видимо что-то упустил?

<section id="1">
.....
                <button class="popup-open">Кнопка-1</button>
    ....
        </section>
....
    <section id="2">
.....
                <button class="popup-open">Кнопка-2</button>
    ....
        </section>

let popup = document.querySelector(".popup-wrapper");
let popupForm = document.querySelector(".popup-form");
let popupBtn = document.querySelectorAll('.popup-open');
let popupClose = document.querySelector(".close-btn");

popupBtn.forEach(function(mix)
mix.addEventListener("click", (e) => {
  e.preventDefault;
  showPopup();
});


function showPopup() {
  popup.classList.add("active");
  popup.style.display = "block";
  bodyScroll();
}

Comments

[Дима]

функцию надо объявить перед вызовом?

[Сергей delphinpro]

тут как минимум синтаксическая ошибка

popupBtn.forEach(function(mix) {
  mix.addEventListener("click", (e) => {
    e.preventDefault();
    showPopup();
  }
});

в остальном, вроде правильно

[Сергей delphinpro]

Дима, необязательно. Function declaration поднимется компилятором наверх области видимости. Вот если бы использовать expression (const func = function () {}), тогда да, следовало бы объявить перед использованием.

[SiO4]

Сергей delphinpro, спасибо, но к сожалению это всё ещё не работает.

[Сергей delphinpro]

SiO4, локализуйте неработающий код в "живом" примере на codepen, посмотрим, что у вас там не работает.

[SiO4]

Сергей delphinpro, https://codepen.io/baddy512/pen/OJEMGmr

Answer 1

[Сергей delphinpro]

Первое. Вы разве не видите предупреждение об ошибке:



Нажмите, вам покажут где она



Как видно, не хватает закрывающей скобки. Поставьте ее.

Второе.
Чтобы выбрать все кнопки, нужно использовать querySelectorAll, а у вас выборка прозводится методом querySelector.



Тоже исправьте.
И все заработает