[Solved] tic tac toe game in JavaScript does not display that game is a draw

by


  1. spelling mistake – 2nd length in if (!winner && steps.X.length + steps.O.length === 9) {
  2. Missing backtics

I shortened some of the code too.

Here is the fixed code

let turn = "X";
let cells = document.querySelectorAll('[data-cell]');
let message = document.querySelector('#print');
let restart = document.querySelector('#but');
let steps = {
  X: [],
  O: []
}


const winConditions = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],

  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],

  [0, 4, 8],
  [2, 4, 6],
];


//console.log(winConditions);

cells.forEach(cell => {
  cell.addEventListener("click", () => move(cell));
});
restart.addEventListener("click", restartGame);
//console.log(inputs);

function move(cell) {
  cell.value = turn; //marking cells with X or O depends on turn
  cell.style.pointerEvents="none"; //making cell not clickable
  //taking index of the cell and push it to step tracker
  let cellIndex = parseInt(cell.getAttribute("data-cell"));
  steps[turn].push(cellIndex);
  changeTurn();
}
//functon bellow does not display when game is Draw!!!
function changeTurn() {
  let winner = validateWin();
  if (winner) {
    stopGame(`${winner} wins!`);
  } else if (!winner && steps.X.length + steps.O.length === 9) {
    stopGame("Draw!");
  } else {
    turn = turn === 'X' ? 'O' : 'X';
    message.innerHTML = `${turn}'s turn`;
  }
}

function validateWin() {
  return winConditions
    .some(winCondition =>  winCondition
      .every(condition => steps[turn].includes(condition))) ?  turn : null;
}


function stopGame(msg) {
  message.innerHTML = msg;
  cells.forEach(cell => {
    cell.style.pointerEvents="none";
  });
}

function restartGame() {
  steps.O = [];
  steps.X = [];
  turn = 'X';
  message.innerHTML = "X's turn";
  cells.forEach(cell => {
    cell.value = null;
    cell.style.pointerEvents="auto";
  });
}
* {
  margin: 0;
  padding: 0;
}

h1 {
  color: orangered;
  font-size: 45px;
}


/* 3*3 Grid */

#b1,
#b2,
#b3,
#b4,
#b5,
#b6,
#b7,
#b8,
#b9 {
  width: 80px;
  height: 52px;
  margin: auto;
  border: 1px solid gray;
  border-radius: 6px;
  font-size: 30px;
  text-align: center;
}


/* Reset Button */

#but {
  box-sizing: border-box;
  width: 95px;
  height: 40px;
  border: 1px solid dodgerblue;
  margin: auto;
  border-radius: 4px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background-color: dodgerblue;
  color: white;
  font-size: 20px;
  cursor: pointer;
}


/* Player turn space */

#print {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: dodgerblue;
  font-size: 20px;
}


/* Main container */

#main {
  text-align: center;
}


/* Game Instruction Text */

#ins {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: dodgerblue;
  font-size: 17px;
}
<div id="main">
  <h1 class="playerText">TIC TAC TOE</h1>

  <br><br>
  <input class="cell" data-cell="0" type="text" id="b1" readonly>
  <input class="cell" data-cell="1" type="text" id="b2" readonly>
  <input class="cell" data-cell="2" type="text" id="b3" readonly>
  <br><br>
  <input class="cell" data-cell="3" type="text" id="b4" readonly>
  <input class="cell" data-cell="4" type="text" id="b5" readonly>
  <input class="cell" data-cell="5" type="text" id="b6" readonly>
  <br><br>
  <input class="cell" data-cell="6" type="text" id="b7" readonly>
  <input class="cell" data-cell="7" type="text" id="b8" readonly>
  <input class="cell" data-cell="8" type="text" id="b9" readonly>
  <br><br><br>
  <button id="but">
            RESET
        </button>

  <br><br>
  <p id="print"> X's Turn </p>
</div>

solved tic tac toe game in JavaScript does not display that game is a draw