Why is computer randomly puting down 2 O's in my tic-tac-toe game

Question

let O1 = false;
let X1 = false;
let O2 = false;
let X2 = false;
let O3 = false;
let X3 = false;
let O4 = false;
let X4 = false;
let O5 = false;
let X5 = false;
let O6 = false;
let X6 = false;
let O7 = false;
let X7 = false;
let O8 = false;
let X8 = false;
let O9 = false;
let X9 = false;

let turn = 0;

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

function Xon2() {
  if (O2 === false && X2 === false && turn === 0) {
    document.getElementById("2").innerHTML = 'X';
    X2 = true;
    turn++
    setTimeout(compMove, 1000);
  }
}

function Xon3() {
  if (O3 === false && X3 === false && turn === 0) {
    document.getElementById("3").innerHTML = 'X';
    X3 = true;
    turn++
    setTimeout(compMove, 1000);
  }
}

function Xon4() {
  if (O4 === false && X4 === false && turn === 0) {
    document.getElementById("4").innerHTML = 'X';
    X4 = true;
    turn++
    setTimeout(compMove, 1000);
  }
}

function Xon5() {
  if (O5 === false && X5 === false && turn === 0) {
    document.getElementById("5").innerHTML = 'X';
    X5 = true;
    turn++
    setTimeout(compMove, 1000);
  }
}

function Xon6() {
  if (O6 === false && X6 === false && turn === 0) {
    document.getElementById("6").innerHTML = 'X';
    X6 = true;
    turn++
    setTimeout(compMove, 1000);
  }
}

function Xon7() {
  if (O7 === false && X7 === false && turn === 0) {
    document.getElementById("7").innerHTML = 'X';
    X7 = true;
    turn++
    setTimeout(compMove, 1000);
  }
}

function Xon8() {
  if (O8 === false && X8 === false && turn === 0) {
    document.getElementById("8").innerHTML = 'X';
    X8 = true;
    turn++
    setTimeout(compMove, 1000);
  }
}

function Xon9() {
  if (O9 === false && X9 === false && turn === 0) {
    document.getElementById("9").innerHTML = 'X';
    X9 = true;
    turn++
    setTimeout(compMove, 1000);
  }
}

function compMove() {
  if (turn === 1) {
    if (X1 === true && X2 === true && X3 === false && O3 === false && turn === 1) {
      document.getElementById("3").innerHTML = 'O';
      O3 = true
      turn--
    }
    if (X1 === true && X3 === true && X2 === false && O2 === false && turn === 1) {
      document.getElementById("2").innerHTML = 'O';
      O2 = true
      turn--
    }
    if (X2 === true && X3 === true && X1 === false && O1 === false && turn === 1) {
      document.getElementById("1").innerHTML = 'O';
      O1 = true
      turn--
    }
    if (X3 === true && X4 === true && X5 === false && O5 === false && turn === 1) {
      document.getElementById("5").innerHTML = 'O';
      O5 = true
      turn--
    }
    if (X3 === true && X5 === true && X4 === false && O4 === false && turn === 1) {
      document.getElementById("4").innerHTML = 'O';
      O4 = true
      turn--
    }
    if (X4 === true && X5 === true && X3 === false && O3 === false && turn === 1) {
      document.getElementById("3").innerHTML = 'O';
      O3 = true
      turn--
    }
    if (X7 === true && X8 === true && X9 === false && O9 === false && turn === 1) {
      document.getElementById("9").innerHTML = 'O';
      O9 = true
      turn--
    }
    if (X7 === true && X9 === true && X8 === false && O8 === false && turn === 1) {
      document.getElementById("8").innerHTML = 'O';
      O8 = true
      turn--
    }
    if (X8 === true && X9 === true && X7 === false && O7 === false && turn === 1) {
      document.getElementById("7").innerHTML = 'O';
      O7 = true
      turn--
    }
    if (X1 === true && X4 === true && X7 === false && O7 === false && turn === 1) {
      document.getElementById("7").innerHTML = 'O';
      O7 = true
      turn--
    }
    if (X1 === true && X7 === true && X4 === false && O4 === false && turn === 1) {
      document.getElementById("4").innerHTML = 'O';
      O4 = true
      turn--
    }
    if (X7 === true && X4 === true && X1 === false && O1 === false && turn === 1) {
      document.getElementById("1").innerHTML = 'O';
      O1 = true
      turn--
    }
    if (X2 === true && X5 === true && X8 === false && O8 === false && turn === 1) {
      document.getElementById("8").innerHTML = 'O';
      O8 = true
      turn--
    }
    if (X2 === true && X8 === true && X5 === false && O5 === false && turn === 1) {
      document.getElementById("5").innerHTML = 'O';
      O5 = true
      turn--
    }
    if (X5 === true && X8 === true && X2 === false && O2 === false && turn === 1) {
      document.getElementById("2").innerHTML = 'O';
      O2 = true
      turn--
    }
    if (X3 === true && X6 === true && X9 === false && O9 === false && turn === 1) {
      document.getElementById("9").innerHTML = 'O';
      O9 = true
      turn--
    }
    if (X3 === true && X9 === true && X6 === false && O6 === false && turn === 1) {
      document.getElementById("6").innerHTML = 'O';
      O6 = true
      turn--
    }
    if (X6 === true && X9 === true && X3 === false && O3 === false && turn === 1) {
      document.getElementById("3").innerHTML = 'O';
      O3 = true
      turn--
    }
    if (O5 === false && X5 === false) {
      if (X1 === true || X2 === true || X3 === true || X4 === true || X5 === true || X6 === true || X7 === true || X8 === true || X9 === true && turn === 1) {
        document.getElementById("5").innerHTML = 'O';
        O5 = true
        turn--
      } else {
        compRandom()
      }
    } else {
      compRandom()
    };
  }
}

function compRandom() {
  randomChoice = Math.floor(Math.random() * 9) + 1
  if (randomChoice === 1 && X1 === false && O1 === false) {
    document.getElementById("1").innerHTML = 'O';
    O1 = true
    turn--
  }
  if (randomChoice === 2 && X2 === false && O2 === false) {
    document.getElementById("2").innerHTML = 'O';
    O2 = true
    turn--
  }
  if (randomChoice === 3 && X3 === false && O3 === false) {
    document.getElementById("3").innerHTML = 'O';
    O3 = true
    turn--
  }
  if (randomChoice === 4 && X4 === false && O4 === false) {
    document.getElementById("4").innerHTML = 'O';
    O4 = true
    turn--
  }
  if (randomChoice === 5 && X5 === false && O5 === false) {
    document.getElementById("5").innerHTML = 'O';
    O5 = true
    turn--
  }
  if (randomChoice === 6 && X6 === false && O6 === false) {
    document.getElementById("6").innerHTML = 'O';
    O6 = true
    turn--
  }
  if (randomChoice === 7 && X7 === false && O7 === false) {
    document.getElementById("7").innerHTML = 'O';
    O7 = true
    turn--
  }
  if (randomChoice === 8 && X8 === false && O8 === false) {
    document.getElementById("8").innerHTML = 'O';
    O8 = true
    turn--
  }
  if (randomChoice === 9 && X9 === false && O9 === false) {
    document.getElementById("9").innerHTML = 'O';
    O9 = true
    turn--
  }
}

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

<html>

<body>
  <table>
    <tr>
      <td align="center"><button id="1" onclick="Xon1()">-</button></td>
      <td align="center"><button id="2" onclick="Xon2()">-</button></td>
      <td align="center"><button id="3" onclick="Xon3()">-</button></td>
    </tr>
    <tr>
      <td align="center"><button id="4" onclick="Xon4()">-</button></td>
      <td align="center"><button id="5" onclick="Xon5()">-</button></td>
      <td align="center"><button id="6" onclick="Xon6()">-</button></td>
    </tr>
    <tr>
      <td align="center"><button id="7" onclick="Xon7()">-</button></td>
      <td align="center"><button id="8" onclick="Xon8()">-</button></td>
      <td align="center"><button id="9" onclick="Xon9()">-</button></td>
    </tr>
  </table>
</body>

</html>

I've looked through the code and I know it's a lot so I probably missed something so maybe somebody could help me figure out whats wrong with it. Is there some problem with the if statements? Also you don't have to but I wouldn't mind if you could figure out how to shorten it and or simplify it to make it easier to review.

Answer 1

Two O's in tic-tac-toe game in your code is result because there is no else if, in your code is only if and else when you add else if then there is no two O's in one computer turn.

 let O1 = false;
      let X1 = false;
      let O2 = false;
      let X2 = false;
      let O3 = false;
      let X3 = false;
      let O4 = false;
      let X4 = false;
      let O5 = false;
      let X5 = false;
      let O6 = false;
      let X6 = false;
      let O7 = false;
      let X7 = false;
      let O8 = false;
      let X8 = false;
      let O9 = false;
      let X9 = false;

      let turn = 0;

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

      function Xon2() {
        if (O2 === false && X2 === false && turn === 0) {
          document.getElementById("2").innerHTML = "X";
          X2 = true;
          turn++;
          setTimeout(compMove, 1000);
        }
      }

      function Xon3() {
        if (O3 === false && X3 === false && turn === 0) {
          document.getElementById("3").innerHTML = "X";
          X3 = true;
          turn++;
          setTimeout(compMove, 1000);
        }
      }

      function Xon4() {
        if (O4 === false && X4 === false && turn === 0) {
          document.getElementById("4").innerHTML = "X";
          X4 = true;
          turn++;
          setTimeout(compMove, 1000);
        }
      }

      function Xon5() {
        if (O5 === false && X5 === false && turn === 0) {
          document.getElementById("5").innerHTML = "X";
          X5 = true;
          turn++;
          setTimeout(compMove, 1000);
        }
      }

      function Xon6() {
        if (O6 === false && X6 === false && turn === 0) {
          document.getElementById("6").innerHTML = "X";
          X6 = true;
          turn++;
          setTimeout(compMove, 1000);
        }
      }

      function Xon7() {
        if (O7 === false && X7 === false && turn === 0) {
          document.getElementById("7").innerHTML = "X";
          X7 = true;
          turn++;
          setTimeout(compMove, 1000);
        }
      }

      function Xon8() {
        if (O8 === false && X8 === false && turn === 0) {
          document.getElementById("8").innerHTML = "X";
          X8 = true;
          turn++;
          setTimeout(compMove, 1000);
        }
      }

      function Xon9() {
        if (O9 === false && X9 === false && turn === 0) {
          document.getElementById("9").innerHTML = "X";
          X9 = true;
          turn++;
          setTimeout(compMove, 1000);
        }
      }

      function compMove() {
        if (turn === 1) {
          if (X1 === true && X2 === true && X3 === false && O3 === false && turn === 1) {
            document.getElementById("3").innerHTML = "O";
            O3 = true;
            turn--;
          } else if (X1 === true && X3 === true && X2 === false && O2 === false && turn === 1) {
            document.getElementById("2").innerHTML = "O";
            O2 = true;
            turn--;
          } else if (X2 === true && X3 === true && X1 === false && O1 === false && turn === 1) {
            document.getElementById("1").innerHTML = "O";
            O1 = true;
            turn--;
          } else if (X3 === true && X4 === true && X5 === false && O5 === false && turn === 1) {
            document.getElementById("5").innerHTML = "O";
            O5 = true;
            turn--;
          } else if (X3 === true && X5 === true && X4 === false && O4 === false && turn === 1) {
            document.getElementById("4").innerHTML = "O";
            O4 = true;
            turn--;
          } else if (X4 === true && X5 === true && X3 === false && O3 === false && turn === 1) {
            document.getElementById("3").innerHTML = "O";
            O3 = true;
            turn--;
          } else if (X7 === true && X8 === true && X9 === false && O9 === false && turn === 1) {
            document.getElementById("9").innerHTML = "O";
            O9 = true;
            turn--;
          } else if (X7 === true && X9 === true && X8 === false && O8 === false && turn === 1) {
            document.getElementById("8").innerHTML = "O";
            O8 = true;
            turn--;
          } else if (X8 === true && X9 === true && X7 === false && O7 === false && turn === 1) {
            document.getElementById("7").innerHTML = "O";
            O7 = true;
            turn--;
          } else if (X1 === true && X4 === true && X7 === false && O7 === false && turn === 1) {
            document.getElementById("7").innerHTML = "O";
            O7 = true;
            turn--;
          } else if (X1 === true && X7 === true && X4 === false && O4 === false && turn === 1) {
            document.getElementById("4").innerHTML = "O";
            O4 = true;
            turn--;
          } else if (X7 === true && X4 === true && X1 === false && O1 === false && turn === 1) {
            document.getElementById("1").innerHTML = "O";
            O1 = true;
            turn--;
          } else if (X2 === true && X5 === true && X8 === false && O8 === false && turn === 1) {
            document.getElementById("8").innerHTML = "O";
            O8 = true;
            turn--;
          } else if (X2 === true && X8 === true && X5 === false && O5 === false && turn === 1) {
            document.getElementById("5").innerHTML = "O";
            O5 = true;
            turn--;
          } else if (X5 === true && X8 === true && X2 === false && O2 === false && turn === 1) {
            document.getElementById("2").innerHTML = "O";
            O2 = true;
            turn--;
          } else if (X3 === true && X6 === true && X9 === false && O9 === false && turn === 1) {
            document.getElementById("9").innerHTML = "O";
            O9 = true;
            turn--;
          } else if (X3 === true && X9 === true && X6 === false && O6 === false && turn === 1) {
            document.getElementById("6").innerHTML = "O";
            O6 = true;
            turn--;
          } else if (X6 === true && X9 === true && X3 === false && O3 === false && turn === 1) {
            document.getElementById("3").innerHTML = "O";
            O3 = true;
            turn--;
          } else if (O5 === false && X5 === false) {
            if (X1 === true || X2 === true || X3 === true || X4 === true || X5 === true || X6 === true || X7 === true || X8 === true || (X9 === true && turn === 1)) {
              document.getElementById("5").innerHTML = "O";
              O5 = true;
              turn--;
            }
          } else {
            compRandom();
          }
        }
      }

      function compRandom() {
        randomChoice = Math.floor(Math.random() * 9) + 1;
        if (randomChoice === 1 && X1 === false && O1 === false) {
          document.getElementById("1").innerHTML = "O";
          O1 = true;
          turn--;
        } else if (randomChoice === 2 && X2 === false && O2 === false) {
          document.getElementById("2").innerHTML = "O";
          O2 = true;
          turn--;
        } else if (randomChoice === 3 && X3 === false && O3 === false) {
          document.getElementById("3").innerHTML = "O";
          O3 = true;
          turn--;
        } else if (randomChoice === 4 && X4 === false && O4 === false) {
          document.getElementById("4").innerHTML = "O";
          O4 = true;
          turn--;
        } else if (randomChoice === 5 && X5 === false && O5 === false) {
          document.getElementById("5").innerHTML = "O";
          O5 = true;
          turn--;
        } else if (randomChoice === 6 && X6 === false && O6 === false) {
          document.getElementById("6").innerHTML = "O";
          O6 = true;
          turn--;
        } else if (randomChoice === 7 && X7 === false && O7 === false) {
          document.getElementById("7").innerHTML = "O";
          O7 = true;
          turn--;
        } else if (randomChoice === 8 && X8 === false && O8 === false) {
          document.getElementById("8").innerHTML = "O";
          O8 = true;
          turn--;
        } else if (randomChoice === 9 && X9 === false && O9 === false) {
          document.getElementById("9").innerHTML = "O";
          O9 = true;
          turn--;
        }
      }

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

<table>
      <tr>
        <td align="center"><button id="1" onclick="Xon1()">-</button></td>
        <td align="center"><button id="2" onclick="Xon2()">-</button></td>
        <td align="center"><button id="3" onclick="Xon3()">-</button></td>
      </tr>
      <tr>
        <td align="center"><button id="4" onclick="Xon4()">-</button></td>
        <td align="center"><button id="5" onclick="Xon5()">-</button></td>
        <td align="center"><button id="6" onclick="Xon6()">-</button></td>
      </tr>
      <tr>
        <td align="center"><button id="7" onclick="Xon7()">-</button></td>
        <td align="center"><button id="8" onclick="Xon8()">-</button></td>
        <td align="center"><button id="9" onclick="Xon9()">-</button></td>
      </tr>
    </table>

Please use loops arrays and objects to create short code without repeating yourself. Here is example of snippet with short code for tic-tac-toe game.

 const combination = [
         [0, 1, 2],
         [3, 4, 5],
         [6, 7, 8],
         [0, 3, 6],
         [1, 4, 7],
         [2, 5, 8],
         [0, 4, 8],
         [2, 4, 6],
       ];
       const fieldsObj = [
         { id: 0, content: "-" },
         { id: 1, content: "-" },
         { id: 2, content: "-" },
         { id: 3, content: "-" },
         { id: 4, content: "-" },
         { id: 5, content: "-" },
         { id: 6, content: "-" },
         { id: 7, content: "-" },
         { id: 8, content: "-" },
       ];
       const table = document.getElementById("table");
       function buttonHandler(event) {
         fieldsObj[event.target.id].content = "X";
         document.getElementById(event.target.id).innerHTML = "X";
         document.getElementById(event.target.id).disabled = true;
         table.style.zIndex = -1;
         checkWin();
         setTimeout(compMove, 1000);
       }

       function compMove() {
         table.style.zIndex = 1;

         for (let i = 0; i < combination.length; i++) {
           for (let j = 0; j < fieldsObj.length; j++) {
             if (
               (fieldsObj[combination[i][0]].content == "X" && fieldsObj[combination[i][1]].content == "X") ||
               (fieldsObj[combination[i][2]].content == "X" && fieldsObj[combination[i][1]].content == "X") ||
               (fieldsObj[combination[i][2]].content == "X" && fieldsObj[combination[i][0]].content == "X")
             ) {
               for (let k = 0; k < 3; k++) {
                 if (fieldsObj[combination[i][k]].content == "-") {
                   document.getElementById(fieldsObj[combination[i][k]].id).innerHTML = "O";
                   document.getElementById(fieldsObj[combination[i][k]].id).disabled = true;
                   fieldsObj[combination[i][k]].content = "O";
                   checkWin();
                   return;
                }
               }
             }
           }
         }
         let randomIndex = [];
         for (let i = 0; i < fieldsObj.length; i++) {
           if (fieldsObj[i].content === "-") {
             randomIndex.push(i);
           }
         }
         if (randomIndex.length <= 0) {
             document.getElementById("info").innerHTML = "End game";
           return;
         }
         let rnd = Math.floor(Math.random() * randomIndex.length);

         document.getElementById(fieldsObj[randomIndex[rnd]].id).innerHTML = "O";
         document.getElementById(fieldsObj[randomIndex[rnd]].id).disabled = true;
         fieldsObj[randomIndex[rnd]].content = "O";
         checkWin();
       }

      function checkWin() {
         for (let i = 0; i < combination.length; i++) {
           for (let j = 0; j < fieldsObj.length; j++) {
             if (
               fieldsObj[combination[i][0]].content == "X" && fieldsObj[combination[i][1]].content == "X" && fieldsObj[combination[i][2]].content == "X"
             ) {
                document.getElementById("info").innerHTML = "You Win!";
             }
            else if (
               fieldsObj[combination[i][0]].content == "O" && fieldsObj[combination[i][1]].content == "O" && fieldsObj[combination[i][2]].content == "O"
             ) {
                document.getElementById("info").innerHTML = "You Lose!";
             }
           }
         }
        }

  table {
        position: relative;
      }
      td {
        border: 1px solid black;
        height: 50px;
        width: 50px;
        align-content: center;
        font-weight: bold;
      }
      td button {
        display: flex;
        justify-content: center;
        margin: auto;
        width: 100%;
        height: 100%;
        align-items: center;
      }

<table id="table">
      <tr>
        <td><button id="0" onclick="buttonHandler(event)">-</button></td>
        <td><button id="1" onclick="buttonHandler(event)">-</button></td>
        <td><button id="2" onclick="buttonHandler(event)">-</button></td>
      </tr>
      <tr>
        <td><button id="3" onclick="buttonHandler(event)">-</button></td>
        <td><button id="4" onclick="buttonHandler(event)">-</button></td>
        <td><button id="5" onclick="buttonHandler(event)">-</button></td>
      </tr>
      <tr>
        <td><button id="6" onclick="buttonHandler(event)">-</button></td>
        <td><button id="7" onclick="buttonHandler(event)">-</button></td>
        <td><button id="8" onclick="buttonHandler(event)">-</button></td>
      </tr>
    </table>
     <div id="info"></div>