Javascript 简单香草JS游戏

我试着写一个简单的香草JS记忆游戏。当我尝试对在Square类中创建的div使用查询选择器时，我遇到了一个问题。Console.log返回空节点列表或数组。我怀疑这个函数是在创建div之前完成的。如何通过查询选择器或其他方法获得此元素

//类SQUARE
出口级广场{
构造函数（编号、类型、字段）{
这个数字=数字；
this.type=type；
this.field=字段；
颜色=[‘红色’、‘红色’、‘蓝色’、‘橙色’、‘橙色’、‘绿色’、‘绿色’、‘金色’、‘金色’、‘粉色’、‘粉色’、‘卡德蓝’、‘紫色’、‘紫色’、‘米色’、‘米色’、‘青色’、‘青色’]
this.divs=[]；
}
创建者（）{
for（设i=0；i{
让我们选择color=Math.floor（Math.random（）*this.colors.length）；
div.style.backgroundColor=this.colors[chooseColor]
此.colors.splice（选择颜色，1）
})
}
addShadow（）{
this.divs.forEach（（div）=>{
常量阴影=（）=>{
div.classList.add（'shadow'）
}
设置超时（shadow，2000）
})
}
}
//类阴影
导出类阴影{
构造函数（shadowDivs）{
this.shadowDivs=shadowDivs；
}
这是我的问题
this.shadowDivs.forEach（（shadowDiv）=>{
shadowDiv.addEventListener（'click'，（）=>{
console.log（this.shadowDivs）
shadowDiv.classList.remove（'shadow'）
})
})
}
}
//主JS文件
从“/Square.js”导入{Square}；
从“/Shadow.js”导入{Shadow}；
班级游戏{
元素={
电话：20，
类型：“div”，
字段：document.getElementById（'field'），
divs:document.querySelectorAll（'.shadow'）//在那里我尝试了增益元素
}
init（）{
const squareCreator=new Square（this.elements.number，this.elements.type，this.elements.field）；
const shadows=newshadow（this.elements.divs）//在那里我创建了新的阴影
creator.creator（）；
squareCreator.addColor（）；
squareCreator.addShadow（）；
//squareCreator.revealDiv（）
阴影。revealDiv（）
}
}
const game=新游戏（）；
game.init（）

文件

您只需执行以下操作：

addEventListener（“DOMContentLoaded”，（）=>{
game.init（）；
});

删除超时

    addShadow() {
        this.divs.forEach((div)=>{
          div.classList.add('shadow')
        })
    }

对ini（）重新排序，并在addShadow之后使用querySelector，否则将没有可选择的内容

    init() {
      const squareCreator = new Square(this.elements.number,this.elements.type,this.elements.field);
      squareCreator.creator();
      squareCreator.addColor();
      squareCreator.addShadow();
      const shadows = new Shadow(document.querySelectorAll('.shadow')) // AND THERE I CREATE NEW SHADOW
      shadows.revealDiv()
    }

---

非常感谢，但是我应该把这个事件的监听器放在哪里？你想放在哪里就放在哪里。始终等待DOM加载。或者您可以使用defer属性：我应该用这个设置的超时替换常量变量吗？我收到了类型错误，因为我尝试替换常量值，当我将此变量更改为let时，但仍然没有发生任何错误，请将需要dom元素的部分包装到零：（可能是我在代码的另一部分中的错误？我按照您所说的将其包装并放入squareCreator.creator（）；在这个时间之外哈哈。我知道问题出在哪里了。在创建并向divs添加shadow类之前，您正在使用querySelector。在addShadow中删除setTimeout，在init（）中addShadow之后移动shadow初始化，并在添加类之后使用querySelector。omg:D谢谢您的时间！现在我明白了