Не работает document.querySelectorAll. Почему?

Question

[Сергей]

Здравствуйте, как только не пробовал решить эту проблему ни чего не помогло.
Есть код:

const modal = document.querySelector('#my-modal');
const modalBtn = document.querySelectorAll('.modal-btn li');
const closeBtn = document.querySelector('.close2');

// Events
modalBtn.addEventListener('click', openModal);
closeBtn.addEventListener('click', closeModal);
window.addEventListener('click', outsideClick);

// Open
function openModal() {
  modal.style.display = 'block';
}

// Close
function closeModal() {
  modal.style.display = 'none';
}

// Close If Outside Click
function outsideClick(e) {
  if (e.target == modal) {
    modal.style.display = 'none';
  }
}

Вот код кнопки:

<li>
<button class="modal-btn bth-head">Получить консультацию</button>
</li>

Если сделать так то работает только на одной кнопке, а надо на трех:

const modal = document.querySelector('#my-modal');
const modalBtn = document.querySelector('#modal-btn');
const closeBtn = document.querySelector('.close2');

// Events
modalBtn.addEventListener('click', openModal);
closeBtn.addEventListener('click', closeModal);
window.addEventListener('click', outsideClick);

// Open
function openModal() {
  modal.style.display = 'block';
}

// Close
function closeModal() {
  modal.style.display = 'none';
}

// Close If Outside Click
function outsideClick(e) {
  if (e.target == modal) {
    modal.style.display = 'none';
  }
}

Как решить данную проблему?

Answer 1

[Дмитрий]

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

const modalBtns = document.querySelectorAll('.modal-btn li');
modalBtns.forEach(b=>b.addEventListener('click', openModal));

Comments

[Сергей]

Спасибо

[Stalker_RED]

Все равно не сработает, потому что в разметке li .modal-btn, а не .modal-btn li

[Сергей]

Stalker_RED, я li вообще убрал

Answer 2

[Stalker_RED]

Нельзя размещать несколько одинаковых id в пределах одного DOM-дерева (на одной странице, грубо говоря).
Научитесь в traversing.

вот вам пример, где каждая кнопка работает со своим блоком, но в коде вообще нет никаких ID.

Comments

[Дмитрий]

Можно.

[Иван Корюков]

dimoff66, нельзя

[Stalker_RED]

dimoff66, можно и в бензобак воды налить, например. Физика не запрещает же!
А то что машина не поедет, это уже другая история, ага?

[Дмитрий]

Stalker_RED,

Поехала

<div id=try>1</div>
<div id=try>2</div>
<div id=try>3</div>

console.log(document.querySelectorAll('#try').length); // 3