Почему когда я присваиваю к каждому элементу класс, открывается только один?

Question

[Nayro TV]

Почему когда я присваиваю к каждому элементу класс, открывается только один?

Вот я каждому присвоил класс 'open__popup' а работает т е открывается только один...

Помогите, я не понял в чём проблема... и как её решить

<div class="uslugi__card">
                  <div class="uslugi__item">
                    <div class="uslugi__item02">
                      <div class="uslugi__item__img">
                        <div class="uslugi__item__img_text">
                          <span>01</span>
                        </div>
                        <div class="uslugi__item__img__image">
                          <img src="img/us2.webp" alt="" />
                        </div>
                      </div>
                      <div class="uslugi__item__text">
                        <div class="uslugi__item__text_title">
                          УСТАНОВКА ЗАМКОВ
                        </div>
                        <div class="uslugi__item__text__text">
                          Примерное, краткое описание услуги. Текст сайта является
                          редактируемым
                        </div>
                        <div class="open__popup">
                          <button class="uslugi__item__text__btn">
                            <span class="uslugi__item__text__btn__s">
                              Оставить заявку
                            </span>
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="uslugi__item">
                    <div class="uslugi__item02">
                      <div class="uslugi__item__img">
                        <div class="uslugi__item__img_text">
                          <span>02</span>
                        </div>
                        <div class="uslugi__item__img__image">
                          <img src="img/us5.webp" alt="" />
                        </div>
                      </div>
                      <div class="uslugi__item__text">
                        <div class="uslugi__item__text_title">РЕМОНТ ЗАМКОВ</div>
                        <div class="uslugi__item__text__text">
                          Примерное, краткое описание услуги. Текст сайта является
                          редактируемым
                        </div>
                        <div class="open__popup">
                          <button class="uslugi__item__text__btn">
                            <span class="uslugi__item__text__btn__s">
                              Оставить заявку
                            </span>
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>

// Popup
const openPop = document.querySelector('.open__popup');
const closePop = document.querySelector('.popup__close');
                  document.querySelector('.popup__area');
const popUp = document.querySelector('.popup');

openPop.addEventListener('click', function (e) {
  e.preventDefault();
  popUp.classList.add('active');
});

closePop.addEventListener('click', () => {
  popUp.classList.remove('active');
});

Comments

[Danny Arty]

Senior Dev, у вас указан querySelector

[Nayro TV]

Danny Arty, ну и сениоры не без ошибок))))

Answer 1

[imko]

У тебя в скрипте обрабатывается только один попап, одна кнопка открытия и одна закрытия потому что querySelector возвращает только первый подходящий под селектор элемент, тебе нужно использовать querySelectorAll

Comments

[Nayro TV]

Спасибо! Вот только навесил я сейчас на всё (document.querySelectorAll)
теперь ничего не работает... даже первый

[imko]

Сергей Молвов, ну так ты наверно пытаешься к коллекции применить методы отдельного элемента? надо логику менять конечо)

[Nayro TV]

imko, Блин да я уже понял) прости конечно, но я просто новенький:( всё пытаюсь понять js...

Answer 2

[Stanislav]

const openPops = document.querySelectorAll('.open__popup');
const closePop = document.querySelector('.popup__close');
const popUps = document.querySelectorAll('.popup');

openPops.forEach((openPop, index) => {
  openPop.addEventListener('click', function (e) {
    e.preventDefault();
    popUps[index].classList.add('active');
  });
});

closePop.addEventListener('click', () => {
  popUps.forEach(popUp => {
    popUp.classList.remove('active');
  });
});

Comments

[Nayro TV]

Полный ответ))

Answer 3

[Сергей Харитоноф]

Добрый день! Вы вешаете событие на 1 элемент, а не на все.

Смотрите в сторону document.querySelectorAll.

Comments

[Nayro TV]

Пишет Uncaught TypeError: openPop.addEventListener is not a function
но всё равно спаисбо ( тупанул)

[Сергей Харитоноф]

Сергей Молвов, Вам необходимо получить список элементов, после перебрать их, используя например forEach, в процессе присвоив каждому event.

[Nayro TV]

Сергей Харитоноф, Спасибо большое блин я просто новичок в этой сфере все лишь 2 недели в js)))