Q: How to make each box in grid to respond to on('click')? I'm building turn-based game in javascript and I have css grid and it is looped over to create the grid. I need to make each box clickable but when I try it it returns an error saying grid-item is null.
I tried to loop over the grid and added a click listener and I got an error every time. I managed only to make whole grid field to respond to click event and that's all.
<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();

I can't find why I got gridTile as a null.

A: I've moved your drawGrid() up a bit:
let gridAccess = document.getElementsByClassName('grid');
drawGrid();
let gridTile = document.getElementById('grid-tile-0');

Demo
When you run let gridTile = document.getElementById('grid-tile-0'); in your current code, the element grid-tile-0 has not been created.


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>



A: The gridTile is null because you try to find it before create it. To get clickable all boxes change gridContainer.append to
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>


