querySelectorAll для любого div в элементе

Question

Я ожидал, что это приведет к появлению предупреждения для любого div, который я нажимаю внутри идентификатора раздела playGrid, но ничего не делает.

<div id="playGrid" class="w">
  <section>
    <div id="0_0"></div>
    <div id="0_1"></div>
    <div id="0_2"></div>
    <div id="0_3"></div>

    <div id="1_0"></div>
    <div id="1_1"></div>
    <div id="1_2"></div>
    <div id="1_3"></div>

    <div id="2_0"></div>
    <div id="2_1"></div>
    <div id="2_2"></div>
    <div id="2_3"></div>

    <div id="3_0"></div>
    <div id="3_1"></div>
    <div id="3_2"></div>
    <div id="3_3"></div>
  </section>
</div>

JavaScript

document.getElementById("playGrid").querySelectorAll('section div').forEach(function(el){
  el.addEventListener('click', function() {
    alert(this.id);
  });
});

Answer 1

Я думаю, проблема в том, что ваш код запускается до полной загрузки документа. Чтобы запустить код после загрузки страницы, добавьте прослушиватель событий для события 'DOMContentLoaded':

document.addEventListener('DOMContentLoaded', function(){
  document.getElementById("playGrid").querySelectorAll('section div').forEach(function(el) {
    el.addEventListener('click', function() {
      alert(this.id);
    });
  });
});

https://codepen.io/mikhailsidorov/pen/BaoPKoX

Answer 2

Примерно так должно работать. Также убедитесь, что ваш скрипт выполняется после загрузки страницы, а не раньше. Использоватьdefer отметьте на вашем <script> элемент или переместите <script> элемент до конца вашего тела.

[ ...document.querySelectorAll('#playGrid section div') ].forEach((div) => {
   div.addEventListener('click', (event) => {
      alert(event.currentTarget.id);
   });
});

Answer 3

Два варианта добавления такого контента

  <section>
    <div id="0_0">content</div>
    <div id="0_1">content</div>
    <div id="0_2">content</div>
    <div id="0_3">content</div>

    <div id="1_0">content</div>
    <div id="1_1"></div>
    <div id="1_2"></div>
    <div id="1_3"></div>

    <div id="2_0"></div>
    <div id="2_1"></div>
    <div id="2_2"></div>
    <div id="2_3"></div>

    <div id="3_0"></div>
    <div id="3_1"></div>
    <div id="3_2"></div>
    <div id="3_3"></div>
  </section>
</div>

или используйте css, добавив класс .content ко всем вашим div:

.content{
height: 10px;
width:10px;
}