javascript - 如何使网格中的每个框响应 ('click' )？

Question

我正在用 javascript 构建回合制游戏，并且我有 css 网格，并且它被循环以创建网格。我需要使每个框都可单击，但是当我尝试它时，它会返回一个错误，指出 grid-item 为空。

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

<div id="game-container" class="game-container">
            <div id="grid-container" class="grid-container"></div>
        </div>

.grid-container {
    display: grid;
    max-width: 620px;
    max-height: 620px;
    grid-template: repeat(10, 1fr)/repeat(10, 1fr);
    margin: 50px auto;
    background-color: #16eeca;  
}

.grid {
    border: 1px solid #000;
    width: 60px;
    height: 60px;
}

let gridContainer = $('#grid-container');
let gridAccess = document.getElementsByClassName('grid');
let gridTile = document.getElementById('grid-tile-0');

// Function that draws the map
function drawGrid() {
    for (let x = 0; x < 1; x++) {
        for (let y = 0; y < 1; y++) {
            for (let i = 0; gridAccess.length < 100; i++) {
                gridContainer.append('<div id="grid-tile-' + i +  '"' + ' class="grid"' + '>Hey</div>');
            }

        }
    }
}
drawGrid();

我不明白为什么我的 gridTile 为 null。

Answer 1

我将你的 drawGrid() 向上移动了一点:

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

演示

当您在当前代码中运行 let gridTile = document.getElementById('grid-tile-0'); 时，元素 grid-tile-0 还没有已创建。

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

console.log(gridTile)
// Function that draws the map
function drawGrid() {
  for (let x = 0; x < 1; x++) {
    for (let y = 0; y < 1; y++) {
      for (let i = 0; gridAccess.length < 100; i++) {
        gridContainer.append('<div id="grid-tile-' + i + '"' + ' class="grid"' + '>Hey</div>');
      }

    }
  }
}

.grid-container {
  display: grid;
  max-width: 620px;
  max-height: 620px;
  grid-template: repeat(10, 1fr)/repeat(10, 1fr);
  margin: 50px auto;
  background-color: #16eeca;
}

.grid {
  border: 1px solid #000;
  width: 60px;
  height: 60px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="game-container" class="game-container">
  <div id="grid-container" class="grid-container"></div>
</div>