Javascript 如何使网格中的每个框在（'；单击'；）上响应？

我正在用javascript构建基于回合的游戏，我有css网格，它被循环来创建网格。我需要使每个框都可单击，但当我尝试时，它返回一个错误，表示网格项为空

我尝试在网格上循环，并添加了一个click侦听器，每次都会出错。我只设法使整个网格字段响应单击事件，仅此而已

.grid容器{
显示：网格；
最大宽度：620px；
最大高度：620px；
网格模板：重复（10，1fr）/重复（10，1fr）；
保证金：50px自动；
背景色：#16eeca；
}
.电网{
边框：1px实心#000；
宽度：60px；
高度：60px；
}

let gridContainer=$（“#grid container”）；
让gridAccess=document.getElementsByClassName（'grid'）；
让gridTile=document.getElementById（'grid-tile-0'）；
//绘制地图的函数
函数drawGrid（）{
for（设x=0；x<1；x++）{
for（设y=0；y<1；y++）{
for（设i=0；gridAccess.length<100；i++）{
append（'Hey'）；
}
}
}
}
drawGrid（）；

---

我找不到为什么我将

gridTile

设为

null

我将您的

drawGrid（）

上移了一点：

let gridAccess = document.getElementsByClassName('grid');
drawGrid();
let gridTile = document.getElementById('grid-tile-0');

演示

当您运行

时，让gridTile=document.getElementById（'grid-tile-0'）在当前代码中，尚未创建元素
grid-tile-0


let gridContainer=$（“#grid container”）；
让gridAccess=document.getElementsByClassName（'grid'）；
drawGrid（）；
让gridTile=document.getElementById（'grid-tile-0'）；
console.log（gridTile）
//绘制地图的函数
函数drawGrid（）{
for（设x=0；x<1；x++）{
for（设y=0；y<1；y++）{
for（设i=0；gridAccess.length<100；i++）{
append（'Hey'）；
}
}
}
}
.grid容器{
显示：网格；
最大宽度：620px；
最大高度：620px；
网格模板：重复（10，1fr）/重复（10，1fr）；
保证金：50px自动；
背景色：#16eeca；
}
.电网{
边框：1px实心#000；
宽度：60px；
高度：60px；
}
网格块
为空，因为您试图在创建它之前找到它。要获得可单击的所有框，请更改
gridContainer。将
附加到

gridContainer.append(`
 <div onclick="clickBox(${x},${y},${i},this)" id="grid-tile-${i}"  class="grid" >
    Hey
 </div>
`);


因为您运行了
document.getElementById（'grid-tile-0'）。尝试移动
drawGrid（）
在您的
之前，让gridContainer
这里有一个jQuery解决方案：您可以通过单击左侧的大灰色复选按钮接受一个答案（如果它对您有帮助的话）。如果你想通过点击上方灰色三角形给任何一个好答案的作者加上+10分，你的意思是我不明白为什么要点击，因为这不是OP问题或问题英语不是我的母语，所以我可能错了，然而，这就是我对标题的理解：主要的操作目标是让每个框在点击时做出响应——我的答案显示了如何做到这一点
gridContainer.append(`
 <div onclick="clickBox(${x},${y},${i},this)" id="grid-tile-${i}"  class="grid" >
    Hey
 </div>
`);