Question 118739 in Html Question posted in
Some basic documentation can be found here.

Html – function doesn't change the variable as its supposed to

i want the reset function to change the turn value to "X" but it doesnt and after every game it changes the starting turn so game 1 x would start, game 2 o starts, game 3 x…,anyway i put a turn = "X" at the first line of the reset function but it doesnt do anything

let board = new Array(9).fill();
const squares = document.getElementsByClassName("square");
let turn = "X";
let X = 0;
let O = 0;

for (let i = 0; i < squares.length; i++) {
  let element = squares[i];
  element.addEventListener("click", function (e) {
    if (!element.textContent) {
      element.textContent = turn;
      console.log(e.target.id);
      board[e.target.id] = e.target.textContent;
      console.log(board);
      findWinningCombination();
      checkDraw();
      turn = turn === "X" ? "O" : "X";
    }
  });
}

function findWinningCombination() {
  const winningCombinations = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];

  for (const combination of winningCombinations) {
    const [a, b, c] = combination;

    if (
      board[a] === board[b] &&
      board[a] === board[c] &&
      board[(a, b, c)] != undefined
    ) {
      switch (turn) {
        case "X":
          X++;
          xText.textContent = `X: ${X}`;
          break;
        
        case "O":
          O++;
          oText.textContent = `O: ${O}`;
          break;
      }
      reset()
    }
  }
}

function checkDraw() {
  if (!(findWinningCombination() || board.includes(undefined))) {
    //if there is a win or any empty squares it returns false if the board is full and there is no win it returns true
    reset();
  }
}

function reset() {
  turn = "X";
  board = new Array(9).fill();
  for (let i = 0; i < squares.length; i++) {
    squares[i].textContent = "";
  }
}
#board {
  display: grid;
  grid-template-columns: auto auto auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 30vw;
  height: 30vw;
  gap: 1vmin;
}

.square {
  font-family: "Nunito", sans-serif;
  background-color: #252525;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 10vw;
  min-height: 10vw;
  font-size: 10vw;
  user-select: none;
  cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>TicTacToe</title>
</head>
<body>

<p id="xText">X: 0</p>
<p id="oText">O: 0</p>

<div id="board">
    <div id="0" class="square"></div>
    <div id="1" class="square"></div>
    <div id="2" class="square"></div>
    <div id="3" class="square"></div>
    <div id="4" class="square"></div>
    <div id="5" class="square"></div>
    <div id="6" class="square"></div>
    <div id="7" class="square"></div>
    <div id="8" class="square"></div>
</div>

<button class="button-6" onclick="reset()">Reset</button>

<script src="script.js"></script>
</body>
</html>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    well in your code you call the reset function in the findWinningCombination function or the checkDraw function and after that you use the question mark condition that changes the turn to X if its O or O if its X so the reset would be called before the turn change i just moved the turn = turn === "X" ? "O" : "X"; up 2 lines above the function calls and it works


  2. 0

    You can change turn X According to you when reset game or cleanbord..

    let board = new Array(9).fill();
const squares = document.getElementsByClassName("square");
let turn = "X";
let X = 0;
let O = 0;

for (let i = 0; i < squares.length; i++) {
  let element = squares[i];
  element.addEventListener("click", function (e) {
    if (!element.textContent) {
      element.textContent = turn;
      console.log(e.target.id);
      board[e.target.id] = e.target.textContent;
      console.log(board);
      findWinningCombination();
      checkDraw();
      turn = turn === "X" ? "O" : "X";
    }
  });
}

function findWinningCombination() {
  const winningCombinations = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];

  for (const combination of winningCombinations) {
    const [a, b, c] = combination;

    if (
      board[a] === board[b] &&
      board[a] === board[c] &&
      board[(a, b, c)] != undefined
    ) {
      switch (turn) {
        case "X":
          X++;
          xText.textContent = `X: ${X}`;
          break;
        
        case "O":
          O++;
          oText.textContent = `O: ${O}`;
          break;
      }
      cleanBord()
    }
  }
}

function checkDraw() {
  if (!(findWinningCombination() || board.includes(undefined))) {
    //if there is a win or any empty squares it returns false if the board is full and there is no win it returns true
    reset();
  }
}
function cleanBord(){ 
  //turn = "X"; 
  board = new Array(9).fill();
  for (let i = 0; i < squares.length; i++) {
    squares[i].textContent = "";
  }
}
function reset() {  
  turn = "X";
  X = 0;
  O = 0;  
  document.getElementById('xText').innerText = `X: ${X}`
  document.getElementById('oText').innerText = `O: ${0}`
  cleanBord();
}
    #board {
  display: grid;
  grid-template-columns: auto auto auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 30vw;
  height: 30vw;
  gap: 1vmin;
}

.square {
  font-family: "Nunito", sans-serif;
  background-color: #252525;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 10vw;
  min-height: 10vw;
  font-size: 10vw;
  user-select: none;
  cursor: pointer;
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>TicTacToe</title>
</head>
<body>

<p id="xText">X: 0</p>
<p id="oText">O: 0</p>

<div id="board">
    <div id="0" class="square"></div>
    <div id="1" class="square"></div>
    <div id="2" class="square"></div>
    <div id="3" class="square"></div>
    <div id="4" class="square"></div>
    <div id="5" class="square"></div>
    <div id="6" class="square"></div>
    <div id="7" class="square"></div>
    <div id="8" class="square"></div>
</div>

<button class="button-6" onclick="reset()">Reset</button>

<script src="script.js"></script>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search