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

Question

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

108 Views Asked by Adam Jacobs At 02 February 2024 at 15:40

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.

Original Q&A

There are 2 best solutions below

Sean Kendle On 02 February 2024 at 15:54

First, you're re-instantiating X1 inside the if(O1 === false && X1 === false && turn === 0) statement. That means there are actually TWO X1 variables. The keyword let instantiates a variable with very limited scope, which lives within any block of code (in this case, the if statement).

Once a variable is instantiated, you can just update the value with =, you don't need let, var, etc.

Second, you have a few syntax errors in your HTML. In the last row of squares, you have <button">. Remove the " in each of those.

Third, you don't have ids on any other of the buttons other than the first one. Add ids to each.

And finally, you're closing the body tag before the table. Close the body tag right before you close the html tag. Scripts should (generally speaking) go into head tags, and it looks like that is what you tried.

I edited your post to make it a snippet, btw, which is code that can be run by people who want to help you.

Full example:

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
    setTimeout(compMove, 1000)
  }
}

function compMove() {
  if (X1 === true) {
    document.getElementById("5").innerHTML = 'O'
  }
}

td {
  border: 1px solid black;
  height: 50px;
  width: 50px;
  text-align: center;
}

<html>

<body>
  <table>
    <tr>
      <td><button id="1" onclick="Xon1()">-</button></td>
      <td><button id="2">-</button></td>
      <td><button id="3">-</button></td>
    </tr>
    <tr>
      <td><button id="4">-</button></td>
      <td><button id="5">-</button></td>
      <td><button id="6">-</button></td>
    </tr>
    <tr>
      <td><button id="7">-</button></td>
      <td><button id="8">-</button></td>
      <td><button id="9">-</button></td>
    </tr>
  </table>
</body>

</html>

**Jai248** · Accepted Answer · 2024-02-02T15:49:20.403000

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.

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

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in TIC-TAC-TOE

Trending Questions

Popular # Hahtags

Popular Questions