I'm trying to make a TicTacToe Ai to play against. But, I try to make it when the first square is clicked a X appears then a second later a O appears

let O1 = false
let X1 = false
let turn = 0
function Xon1() {
if(O1 === false && X1 === false && turn === 0) {
    document.getElementById("1").innerHTML = 'X'
    let X1 = true
  setTimeout(compMove, 1000)}}
  function compMove() {
    if(X1 === true) {
    document.getElementById("5").innerHTML = 'O'}}

      td {
border: 1px solid black;
height: 50px;
width: 50px;}

<html>
  <body>
</body>
  <table>
    <tr>
        <td align= 'center'><button id="1" onclick="Xon1()">-</button></td>
        <td align= 'center'><button>-</button></td>
        <td align= 'center'><button>-</button></td>
    </tr>
    <tr>
        <td align= 'center'><button>-</button></td>
        <td align= 'center'><button>-</button></td>
        <td align= 'center'><button>-</button></td>
    </tr>
    <tr>
        <td align= 'center'><button">-</button></td>
        <td align= 'center'><button">-</button></td>
        <td align= 'center'><button">-</button></td>
    </tr>
</table>
</html>

I keep trying different things but whenever I add a if statement to compMove() it doesn't run even X1 does equal true. I can not figure our what is wrong please help.

Solution

Don't declare X1 again in Xon1 using let and add IDs to all the boxes here is the potential code that you are looking for

<html>
  <body>
    <style>
      td {
        border: 1px solid black;
        height: 50px;
        width: 50px;
      }
    </style>
    <script>
      let O1 = false;
      let X1 = false;
      let turn = 0;

      function Xon1() {
        if (O1 === false && X1 === false && turn === 0) {
          document.getElementById("1").innerHTML = 'X';
          X1 = true; // no need declare X1 again using let so I removed that
          setTimeout(compMove, 1000);
        }
      }

      function compMove() {
        if (X1 === true) {
          document.getElementById("5").innerHTML = 'O';
        }
      }
    </script>
  <table>
    <tr>
      <td align="center"><button id="1" onclick="Xon1()">-</button></td>
      <td align="center"><button id="2">-</button></td>
      <td align="center"><button id="3">-</button></td>
    </tr>
    <tr>
      <td align="center"><button id="4">-</button></td>
      <td align="center"><button id="5">-</button></td> 
      <td align="center"><button id="6">-</button></td>
    </tr>
    <tr>
      <td align="center"><button id="7">-</button></td>
      <td align="center"><button id="8">-</button></td>
      <td align="center"><button id="9">-</button></td>
    </tr>
  </table>
  </body>
</html>

All the best for the next steps.