Question

我正在使用javascript构建基于回合的游戏，并且具有CSS网格，并且将其循环以创建网格。我需要使每个框都可单击，但是当我尝试它时，它返回一个错误，指出grid-item为null。

我尝试遍历网格并添加了一个Click侦听器，每次都出错。我只能使整个网格字段响应单击事件，仅此而已。

<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>

Answer 2

gridTile为空，因为您尝试在创建它之前先找到它。要使所有框都可点击，请将gridContainer.append更改为

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

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 onclick="clickBox(${x},${y},${i},this)" id="grid-tile-${i}"  class="grid" >Hey</div>`);
            }

        }
    }
}
drawGrid();

function clickBox(x,y,i,btn) {
    console.log(i)
}

.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>

如何使网格中的每个框都响应on（'click'）？

2 个答案: