Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Can someone explain why this happen?

const chessBoard = document.querySelector("#board");
let aSwitch = true; // define a switch to create black & white square
let increment = 1; // will be use to determine the row of the board

for (let i = 0; i < 64; i++) {
  let square = document.createElement("div");
  square.classList.add("square");

  if (aSwitch === true) {
    square.classList.add("white");
    aSwitch = false;
   } else {
        square.classList.add("black");
    aSwitch = true;
  }

  if (i === 7 * increment) {
    increment++;
   aSwitch = !aSwitch;
  } // ensure that the next row will follow a checkered pattern
  chessBoard.append(square);
}

output:

chessboard with the equation 8 * increment - 1

however if i change the sequence to i === 8 * increment, the output is:

chessboard with the equation 8 * increment

Please help me understand this phenomenon since i am very dummb and confused, thanks alot!

I did try using the internet, and best i came up with was that the square was in a 0-index sequence, but when i try using the equation 7 * increment, the output was also wrong:

chessboard with equation 7 * increment

Tags:

3

Answers


  1. 0

    The correct check for end of line is

    i % 8 === 7

    as there are 8 cells in a line, you need to start a new line every 8th cell, which will have indexes (given 0-based indexing) of 7, 15, 23 etc. i.e. i % 8 == 7

    You can also simplify your code somewhat:

    const chessBoard = document.querySelector("#board");
let aSwitch = true; // define a switch to create black & white square

for (let i = 0; i < 64; i++) {
  let square = document.createElement("div");
  square.classList.add("square");

  square.classList.add(aSwitch ? "white" : "black");
  aSwitch = !aSwitch;

  if (i % 8 === 7) {
    aSwitch = !aSwitch;
  } // ensure that the next row will follow a checkered pattern
  chessBoard.append(square);
}
    #board { width: 160px; height: 160px; border: 1px solid black; }

.square { width: 20px; height: 20px; float: left; }

.white { background-color: white; }

.black { background-color: black; }
    <div id="board">
</div>
    Login or Signup to reply.
  2. 0

    Your approach is not correct:

    7 * increment will give 7, 14, 21, … So you are checking the 8th square, but then the 15th, the 22nd and so on.

    8 * increment will give 8, 16, 24, … Again. this is not what you want.

    You need to use the remainder operator %: the expression i % 8 === 7 will be true at the 8th, 16th, 24th, … square.

    Login or Signup to reply.
  3. 0

    Another way of solving it is by nesting loops. An outer one for rows, and an inner one for columns. You can then use this formula to get the remainder (%) of a division by 2 to determine if the sum is even or odd:

    (col + row) % 2

    This will work with any size board. Demo:

    const chessBoard = document.querySelector("#board");
const boardSize = 8;
// Set the width of the board accordingly
document.querySelector(':root').style.setProperty('--boardsize', boardSize);

for (let row = 0; row < boardSize; row++) {
  for (let col = 0; col < boardSize; col++) {
    const color = (col + row) % 2 ? 'black' : 'white';
    addSquare(color);
  }
}

function addSquare(color) {
  const square = document.createElement("div");
  square.classList.add("square", color);
  chessBoard.append(square);
}
    <div id="board"></div>                                                                                                       <style>:root{--boardsize: 8}#board{width:calc(var(--boardsize) * 20px);border:1px solid #000;line-height:0}.square{width:20px;height:20px;display:inline-block}.black{background:#000}</style>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search