skip to Main Content
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

3

Answers


  1. 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. 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. 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