I’m trying to build a very basic chess board (with no embedded rules) as a learning challenge. Basically my board is made of 64 divs, where each div has a class .square
. I have two functions: one for adding the .active
class to the clicked square, and another function for moving the piece with the .active
class to the new square. I’ve tried to put the two different eventListeners to call the different functions in an IF ELSE statement, but my condition doesn’t work because the querySelector doesn’t check in real time if there’s any div with the class .active
at that given moment.
My code looks like this:
let squares = document.querySelectorAll(`.square`); let activeSquares = document.querySelectorAll(`.active`); // This condition needs to check if there's any square with the class .active in REAL TIME if (activeSquares.length > 0) { squares.forEach(square => { square.addEventListener(`click`, movePiece); function movePiece() { let pieceToMove = document.querySelector(`.active`).textContent; square.textContent = pieceToMove; } }); } else { squares.forEach(square => { square.addEventListener(`click`, selectPiece); function selectPiece() { square.className = `active square`; } }); }
How do I make it check for the class in real time? Or is my approach completely wrong? Please be merciful, I’ve only been learning this stuff for a couple months, if I’m missing some basic knowledge please point it out so I can look it up.
Thanks!
Advertisement
Answer
In the event handler (a function that is called when a registered event is triggered) we use the Event Object property Event.target
which always points to the tag that the user interacted with. Read the following articles for more details:
Details are commented in example
// Reference <table> const board = document.querySelector('.board'); // This function goes beyond the scope of the question const buildTable = table => { const file = ['a', 'b', 'c', 'd', 'e', 'f', 'h', 'g']; const rank = [8, 7, 6, 5, 4, 3, 2, 1]; let matrix = []; for (let r = 0; r < 8; r++) { let row = table.insertRow(); matrix.push([]); for (let c = 0; c < 8; c++) { let col = row.insertCell(); col.dataset.pos=`${file[c]+rank[r]}`; matrix[r].push(`${file[c]+rank[r]}`); } } return matrix; }; const matrix = buildTable(board); //console.log(matrix); // Bind the 'click' event to <table> board.onclick = activeSQ; function activeSQ(e) { // Reference the tag user clicked const clk = e.target; /* If the user clicked a <td>... ...remove .active from the <td> that was .active previously... ...then add .active to the <td> the user clicked... ...log the algebraic notation of the clicked square */ if (clk.matches('td')) { const prev = this.querySelector('td.active'); if (prev) { prev.classList.remove('active'); } clk.classList.add('active'); console.log(clk.dataset.pos); } }
*, *::before, *::after { box-sizing: border-box; } :root { font: 1vw/1 'Segoe UI'; } html, body { width: 100%; height: 100%; } body { overflow: hidden; } table { table-layout: fixed; border-collapse: collapse; width: 40%; margin: 2.5% auto; border: 0.5px solid lightgrey; } td { width: 12.5%; height: 5rem; border: 0.5px solid lightgrey; } tr:nth-of-type(odd) td:nth-of-type(even) { background: black; } tr:nth-of-type(even) td:nth-of-type(odd) { background: black; } .pos { display: block; } .white, .black { display: inline-flex; justify-content: center; align-items: center; width: 90%; height: 90%; } td.active { outline: 3px inset gold; } .as-console-row::after { width: 0; font-size: 0; } .as-console-row-code { width: 100%; word-break: break-word; } .as-console-wrapper { max-height: 25% !important; }
<table class='board'></table>