finding winner on Tic-Tac-Toe game JavaScript

Question

I'm new to JavaScript and I'm building a Tic Tac Toe game with JavaScript and ruby. Presently I've got code as below but I could not make the function of telling the winner work. Wondering if anybody can help me here? Thank you in advance!

const initialBoard = document.getElementById('navbar-new');
initialBoard.addEventListener("click", (e) => {
  e.preventDefault();
  alert('Game starts!');
  grid_0.innerText = '';
  grid_1.innerText = '';
  grid_2.innerText = '';
  grid_3.innerText = '';
  grid_4.innerText = '';
  grid_5.innerText = '';
  grid_6.innerText = '';
  grid_7.innerText = '';
  grid_8.innerText = '';
});

const grid_0 = document.getElementById('grid-0');
const grid_1 = document.getElementById('grid-1');
const grid_2 = document.getElementById('grid-2');
const grid_3 = document.getElementById('grid-3');
const grid_4 = document.getElementById('grid-4');
const grid_5 = document.getElementById('grid-5');
const grid_6 = document.getElementById('grid-6');
const grid_7 = document.getElementById('grid-7');
const grid_8 = document.getElementById('grid-8');

let currentPlayer = "X";

function ticTac(){
  if (this.innerText !== "X" || this.innerText !== "O") {
    this.innerText = currentPlayer;
    currentPlayer = currentPlayer == "X" ? "O" : "X";
  }
};

document.getElementById("grid-0").onclick = ticTac;
document.getElementById("grid-1").onclick = ticTac;
document.getElementById("grid-2").onclick = ticTac;
document.getElementById("grid-3").onclick = ticTac;
document.getElementById("grid-4").onclick = ticTac;
document.getElementById("grid-5").onclick = ticTac;
document.getElementById("grid-6").onclick = ticTac;
document.getElementById("grid-7").onclick = ticTac;
document.getElementById("grid-8").onclick = ticTac;

@Amadan I've got the idea of making it more complex so I started with ruby and came to realise that I should have made the basic function done an that's why .. — Agnès Ching, Feb 14 '18 at 10:12

score 1 · Answer 1 · answered Feb 14 '18 at 09:38

const allThree = (firstBox, secondBox, thirdBox) => {
      let firstBoxOwner = firstBox.innerText;
      let secondBoxOwner = secondBox.innerText;
      let thirdBoxOwner = thirdBox.innerText;

      if ((firstBoxOwner === secondBoxOwner) && (secondBoxOwner === thirdBoxOwner)){
        if (firstBoxOwner === "X"){
          alert('X wins!');
        } else if (firstBoxOwner === "O"){
          alert('O wins!');
        }
      }
      return null;
    };

    const diagonalWinner = () => {
      let leftDownDiag = allThree(grid_0, grid_4, grid_8);
      let rightUpDiag = allThree(grid_2, grid_4, grid_6);

      return leftDownDiag || rightUpDiag;
    };

    const columnWinner = () => {
      let leftCol = allThree(grid_0, grid_3, grid_6);
      let middleCol = allThree(grid_1, grid_4, grid_7);
      let rightCol = allThree(grid_2, grid_5, grid_8);

      return leftCol || (middleCol || rightCol);
    };

    const rowWinner = () => {
      let topRow = allThree(grid_0, grid_1, grid_2);
      let middleRow = allThree(grid_3, grid_4, grid_5);
      let bottomRow = allThree(grid_6, grid_7, grid_8);

      return topRow || (middleRow || bottomRow);
    };

    const getWinner = () => {
      return diagonalWinner() || (rowWinner() || columnWinner());
    };

    const winner = getWinner();
    if (winner) {
      alert("Player " + winner + " won!");
    };

Here it is the rest of my code now (too long to post with the original question)

finding winner on Tic-Tac-Toe game JavaScript

1 Answers1