## Getting neighboring squares in a grid

HTML example of a 3×3 grid. Each row has a row class, which is used in the JavaScript.

<div id="grid">
<div class="row">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="row">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="row">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</div>

JavaScript example of getting neighbors of a clicked square. There is a helper function to reduce duplicate code.

function clickSquare() {
let squareToLeft = getNeighbor(this, -1, 0) // null if square on left edge
let squareToRight = getNeighbor(this, 1, 0) // null if square on right edge
let squareAbove = getNeighbor(this, 0, -1) // null if square on top edge
let squareBelow = getNeighbor(this, 0, 1) // null if square on bottom edge
}

function getNeighbor(square, xDiff, yDiff) {
// array of rows
let rows = document.getElementsByClassName(`row`)

let row = square.parentElement // row of square
let y // y coordinate of square, set below
let x // x coordinate of square, set below

// loop through rows to determine y
for (let i = 0; i < rows.length; i++) {
if (rows[i] == row) {
y = i // found matching row, so set y
}
}

// loop through squares in row to determine x
for (let i = 0; i < row.children.length; i++) {
if (row.children[i] == square) {
x = i // found matching square, so set x
}
}

// row of neighbor square
let neighborRow = rows[y + yDiff]

if (neighborRow == null) {
// row is beyond edge, so no neighbor square
return null
}
else {
// if x + xDiff is beyond edge, will be null
return neighborRow.children[x + xDiff]
}
}