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

Html – 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.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search