How to make JS querySelector check the DOM in real time-CodePudding

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!

CodePudding user response：

Its simple code will look like this, you can develop it :

const squares = document.getElementsByClassName('square')
Array.from(squares).forEach(ele => {
  ele.addEventListener('click', function () {
    if(this.classList.contains('active')) {
      this.classList.remove("active")
    } else {
      currentActive = document.getElementsByClassName('active')[0]
      if (currentActive) {
        let thisHtml = this.innerHTML
        this.innerHTML = currentActive.innerHTML
        currentActive.innerHTML = thisHtml
        currentActive.classList.remove("active")
      } else {
        this.classList.add("active")
      }  
    }
  })
})

#container {
  height: 169px;
  width: 169px;
}

.square {
  height: 40px;
  width: 40px;
  background-color: #ccc;
  float:left;
  left: 0;
  border: solid 1px;
}

.active {
  background-color: red;
}

<div id="container">
<div class='square'>1</div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
<div class='square'></div>
</div>

CodePudding user response：

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:

Events

Event Delegation

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>