I can't get my winning/draw message to show up in my game (vanilla JS)-CodePudding

I want to return a message whenever there is a win or a draw in my tic-tac-toe game. As of right now, I got my "It's player ___'s turn" messages to show up. But my winning message doesn't show up no matter what, and my draw message appears automatically without me clicking anything(the board is empty)

This is what I have so far: (Below is my HTML first, then JS following.)

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="stylesheet" href="style.css">
  </head>
<body>
<h1>TIC-TAC-TOE</h1>
<h2 id="player1"> Player 1: </h2>
<h2 id="player2">Player 2: </h2>
<h2 id="result"></h2>
<table id="board">
    <tr>
        <td></td> 
        <td></td> 
        <td></td>
    </tr>
    <tr>
        <td></td> 
        <td></td> 
        <td></td>
    </tr>
    <tr>
        <td></td> 
        <td></td> 
        <td></td>
    </tr>
</table>
<button>Restart</button>
</body>
<script src="app.js"></script>
</html>

```
let players = ['x', 'o'] 

let board = [
    null, null, null,  
    null, null, null,
    null, null, null 
]

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


let result = document.getElementById('result')
let cells = document.querySelectorAll('td')
let currentPlayer = players[0] 

cells.forEach(function(cell) { 
    cell.addEventListener('click', function() {
       
       if (cell.innerHTML != '') {
          return; 
        }  
          if (!cell) {
          return;
        }
        if (currentPlayer === players[0]) { //idk why it's making me get the definition of the variable again?
          currentPlayer = players[1] 
           cell.innerHTML = players[0]
           result.innerHTML = "Player O's turn!"
        } else if (currentPlayer === players[1]){
          currentPlayer = players[0]
           cell.innerHTML = players[1]
           result.innerHTML = "Player X's turn!"
        } 
    }) 
    wins() 
})

function wins() {
    for (let i = 0; i < boardWins.length; i  ) {
        let win = boardWins[i] 
        let zero = win[0]
        let one = win[1]
        let two = win[2]
        if (board[zero] === players[0] && board[zero] === board[one] && board[zero] === board[two]) {
            result.innerHTML = 'Player X wins!' //I want this message to show up when there is 3 in a row for 'X'
        }
        else if (board[i] != null) {
            result.innerHTML = 'Draw!'
        } //I want this message to show up when the board fills up and neither player gets 3 in a row. But right now it pops up automatically before I click on any cell 
        }

    }
}
```

I have tried if(board[zero] === board[one] && board[zero] === board[two]), if(board[zero] === board[one] && board[one] === board[two]), and if(board[zero] && board[zero] === board[one] && board[zero] === board[two]); the likes of those. 

I have also tried to hard-code it in the addEventListener function, like if(board[0] === players[0] && board[1] === players[0] && board[2] === players[0]). I've also tried just writing 'x', which also hasn't worked. 

I've also tried putting the wins function above the cells.forEach code and putting wins() at the bottom of the function of addEventListener.

CodePudding user response：

Maybe don't need all the &&, you can just say if (players[0] === board[zero] === board[one] === board[two])

Now that you've simplified the logic by removing the &&'s, does that look correct? With the assignments into the variabes you have declared, board[one] would be the same as saying board[win[1]] - if that's the element you're trying to refer to, and if it's not, change accordingly. Hope this helps!

CodePudding user response：

Maybe I'm missing something, but it doesn't seem like you're updating the variable "board" after each move.

I've added some comments on your code:

if (currentPlayer === players[0]) {
    currentPlayer = players[1] //updating the turn
    cell.innerHTML = players[0] //updating the UI/website
    //You should update "board"
    result.innerHTML = "Player O's turn!"
} 
else if (currentPlayer === players[1]){
    currentPlayer = players[0]
    cell.innerHTML = players[1]
    //same here
    result.innerHTML = "Player X's turn!"
}