Как правильно создавать группу кнопок открывающих модальное окно на JS?

Question

У меня есть несколько кнопок, которые, по идее, открывают одно и тоже модальное окно, но этот код этого делать не хочет. Только если в конец строки переменной "more" добавить "[num]", то сработает кнопка под номером "num".

Я в JS совсем новичок, я уверен, что решение моей проблемы максимально лёгкое, но я надеюсь на ваше понимание и помощь))

let more = document.querySelectorAll('.more'),
    overlay = document.querySelector('.overlay'),
    close = document.querySelector('.popup-close');

  more.addEventListener('click', function () {
    overlay.style.display = 'block';
    this.classList.add('more-splash');
    document.body.style.overflow = 'hidden';
  });

  close.addEventListener('click', function () {
    overlay.style.display = 'none';
    more.classList.remove('more-splash');
    document.body.style.overflow = '';
  });

Answer 1

querySelectorAll возвращает коллекцию (подобную массиву), а не отдельный элемент

let more = document.querySelectorAll('.more'),
    overlay = document.querySelector('.overlay'),
    close = document.querySelector('.popup-close');

more.forEach(function(but){
    but.addEventListener('click', function () {
        overlay.style.display = 'block';
        this.classList.add('more-splash');
        document.body.style.overflow = 'hidden';
    })
});

БЛОГ НА HUSL

Как правильно создавать группу кнопок открывающих модальное окно на JS?

Ответы (1 шт):