JavaScript: нельзя сразу выбрать элементы после их создания?

Question

Мой скрипт содержит следующий код, который вызывает у меня проблемы:

btn.addEventListener('click', ()=> {
  if (!gamePlay) {
    setup()
    let word=document.querySelectorAll('box')
    console.log(word)
    btn.classList.toggle('hidden')
    gamePlay=true
  }
})

Сброс кода можно увидеть на этой скрипке JS (не обращайте внимания на код, закомментированный кстати):https://jsfiddle.net/apasric4/6k7anpvu/1/

После того, как все элементы div созданы в функции setup(), я пытаюсь выбрать их по имени класса (box), однако список узлов в разделе является пустымсписок узлов (который также отображается в консоли).

Я предполагаю, что код является синхронным. Я просто не могу получить доступ к элементам, созданным при вызове setup().

Answer 1

Вы можете получить доступ и запросить элементы документа сразу после их создания.

Проблема в том, что синтаксис селектора неверен;чтобы выбрать элементы с классом box, добавьте к селектору префикс ".":

btn.addEventListener('click', () => {

  if (!gamePlay) {

    setup();

    let word = document.querySelectorAll('.box'); // Prefix .
    console.log(word);
    btn.classList.toggle('hidden');

    gamePlay = true;
  }
})