Как переключаться по className внутри div

Question

Я пытаюсь включить всплывающее окно при нажатии кнопки DIV. Есть несколько DIV, которые можно щелкнуть, и по одному всплывающему окну внутри них.

Пока что я попробовал:

<div class="popup">Button1
   <span class="myPopup">Text inside popup</span>
</div>
<div class="popup">Button2
   <span class="myPopup">Text inside popup</span>
</div>

<script>
var el = document.querySelectorAll(".popup");
for(var i =0; i < el.length; i++) {
   el[i].onclick = function() { document.getElementsByClassName('myPopup')[i].classList.toggle("show")};
}
</script>

Всегда будет одно всплывающее окно внутри одного div, поэтому я предположил, если на div есть событие click, я могу получить элемент по имени класса (myPopup) и использовать тот же индекс, чтобы открыть myPopup, но не могу заставить его работать. Хотелось бы сделать это, желательно только используя JavaScript.

Answer 1

Это рабочий пример:

const elements = document.querySelectorAll(".popup")
elements.forEach(el => {
  el.onclick = function(event) {
    this.classList.toggle("show")
  }
})

https://jsfiddle.net/Buntel/8smdh5ou/9/

Кажется, у вас есть опечатка в classList. toggle ()

Answer 2

Вместо использования

document.getElementsByClassName('myPopup')[i]

используйте

this.querySelector('.myPopup')

this относится к el, поэтому запрос выполняется только Внутри каждого el.

Вместо getElementsByClassName('myPopup')[i] мы используем querySelector('.myPopup'), который всегда возвращает первый .mypopup в каждом el.

(Отредактировано после хорошей обратной связи, предоставленной @ Эрети c Обезьяна )

var el = document.querySelectorAll(".popup");
for (var i = 0; i < el.length; i++) {
  el[i].onclick = function() {
    this.querySelector('.myPopup').classList.toggle("show");
  }
}

.myPopup {
  display: none;
}

.myPopup.show {
  display: block;
}

<div class="popup">Button1
  <span class="myPopup">Text inside popup1</span>
</div>
<div class="popup">Button2
  <span class="myPopup">Text inside popup2</span>
</div>