title: Random Position Choosing for Computer in Tic-Tac-Toe not Working How It's Supposed to
body: <p>Alright, so I made a pretty simple Tic-Tac-Toe game in Python at one point, and it was pretty fun, so I thought I'd spice it up and do it in HTML/JS/CSS to make it a little bit more pretty. It was going pretty good, however I hit a little bump in the road when making the easy "AI" for the game. The easy AI for the game is supposed to just be completely random, and it is, but sometimes it takes over a square that is already occupied, and sometimes it doesn't move at all, so I know it is probably something pretty simple, I just don't know what. I think it's probably somewhere in this block of code, but I don't know:</p>
  
  <pre><code>function computerEasyModeMove(){
    if(player == 'x'){
      computer = 'o';
    }
    if(player == 'o'){
      computer = 'x';
    }
    var computerMove = Math.floor(Math.random() * 9) + 1;
    while(computerMove == 1 &amp;&amp; (topLeftBox.innerHTML == 'o' || topLeftBox.innerHTML == 'x')){
      computerMove = Math.floor(Math.random() * 9) + 1;
    }
     while(computerMove == 2 &amp;&amp; (topMiddleBox.innerHTML == 'o' || topMiddleBox.innerHTML == 'x')){
      computerMove = Math.floor(Math.random() * 9) + 1;
    }
     while(computerMove == 3 &amp;&amp; (topRightBox.innerHTML == 'o' || topRightBox.innerHTML == 'x')){
      computerMove = Math.floor(Math.random() * 9) + 1;
    }
     while(computerMove == 4 &amp;&amp; (middleLeftBox.innerHTML == 'o' || middleLeftBox.innerHTML == 'x')){
      computerMove = Math.floor(Math.random() * 9) + 1;
    }
    while(computerMove == 5 &amp;&amp; (middleMiddleBox.innerHTML == 'o' || middleMiddleBox.innerHTML == 'x')){
      computerMove = Math.floor(Math.random() * 9) + 1;
    }
    while(computerMove == 6 &amp;&amp; (middleRightBox.innerHTML == 'o' || middleRightBox.innerHTML == 'x')){
      computerMove = Math.floor(Math.random() * 9) + 1;
    }
    while(computerMove == 7 &amp;&amp; (bottomLeftBox.innerHTML == 'o' || bottomLeftBox.innerHTML == 'x')){
      computerMove = Math.floor(Math.random() * 9) + 1;
    }
    while(computerMove == 8 &amp;&amp; (bottomMiddleBox.innerHTML == 'o' || bottomMiddleBox.innerHTML == 'x')){
      computerMove = Math.floor(Math.random() * 9) + 1;
    }
    while(computerMove == 9 &amp;&amp; (bottomRightBox.innerHTML == 'o' || bottomRightBox.innerHTML == 'x')){
      computerMove = Math.floor(Math.random() * 9) + 1;
    }
  
    if(computerMove == 1){
        topLeftBox.innerHTML = computer;
        topLeftBox.style.pointerEvents = 'none';
    }
    if(computerMove == 2){
        topMiddleBox.innerHTML = computer;
        topMiddleBox.style.pointerEvents = 'none';
    }
    if(computerMove == 3){
        topRightBox.innerHTML = computer;
        topRightBox.style.pointerEvents = 'none';
    }
    if(computerMove == 4){
        middleLeftBox.innerHTML = computer;
        middleLeftBox.style.pointerEvents = 'none';
    }
    if(computerMove == 5){
        middleMiddleBox.innerHTML = computer;
        middleMiddleBox.style.pointerEvents = 'none';
    }
    if(computerMove == 6){
        middleRightBox.innerHTML = computer;
        middleRightBox.style.pointerEvents = 'none';
    }
    if(computerMove == 7){
        bottomLeftBox.innerHTML = computer;
        bottomLeftBox.style.pointerEvents = 'none';
    }
    if(computerMove == 8){
        bottomMiddleBox.innerHTML = computer;
        bottomMiddleBox.style.pointerEvents = 'none';
    }
    if(computerMove == 9){
        bottomRightBox.innerHTML = computer;
        bottomRightBox.style.pointerEvents = 'none';
    }
  }
  </code></pre>
  
  <p>That is the code that I use for the easy AI basically, with the full code below. I think my game is looking pretty good. If you want to try it, I have been making it on repl.it, (<a href="https://repl.it/@AnthonyRobinso2/Tic-Tac-Toe-HTMLJS" rel="noreferrer">https://repl.it/@AnthonyRobinso2/Tic-Tac-Toe-HTMLJS</a>) if that makes it easier to help me. I'm still working on the game, and the harder ai modes, so I still need to get those done, but I want to have a playable game, even if it is really easy. Thanks again!</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width"&gt;
      &lt;title&gt;repl.it&lt;/title&gt;
      &lt;link href="style.css" rel="stylesheet" type="text/css" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;center&gt;
        &lt;div id='setup'&gt;
          Hey! Welcome to my Tic-Tac-Toe game! Please choose some settings below!
          &lt;br&gt;
          &lt;div class='xOrO'&gt;
            &lt;h3&gt;Player:&lt;/h3&gt;
            Do you want to be X's?&lt;input type='checkbox' id='Xs' value='X' onchange='player = "x"'&gt;
            &amp;nbsp; &amp;nbsp; Or do you want to be O's?&lt;input type='checkbox' id='Os' value='O' onchange='player = "o"'&gt;
            &lt;h3&gt;Opponent AI Level:&lt;/h3&gt;
            Easy&lt;input type='checkbox' id='easy' value='easyMode'&gt;
            &amp;nbsp; &amp;nbsp; Medium (Coming Soon)&lt;input type='checkbox' id='medium' value='mediumMode'&gt;
            &amp;nbsp; &amp;nbsp; Hard (Coming Soon)&lt;input type='checkbox' id='hard' value='hardMode'&gt;
            &lt;br&gt;
            &lt;h4&gt;Do you want to go first, or have the computer go first?&lt;/h4&gt;
            First&lt;input type='checkbox' id='goFirst' value='first' onchange='playerFirst = true'&gt;
            &amp;nbsp; &amp;nbsp Second&lt;input type='checkbox' id='goSecond' value='second' onchange='playerFirst = false'&gt;
            &lt;br&gt;
            &lt;br&gt;
            &lt;br&gt;
            &lt;button id='confirm' onclick='getGameUp()'&gt;Confirm&lt;/button&gt;
        &lt;/div&gt;
  
  
        &lt;div id='ticTacBoard'&gt;
          &lt;div id='topLeft' onclick='move("topLeft")'&gt;&amp;nbsp;&lt;/div&gt;
          &lt;div id='topMiddle' onclick='move("topMiddle")'&gt;&amp;nbsp;&lt;/div&gt;
          &lt;div id='topRight' onclick='move("topRight")'&gt;&amp;nbsp;&lt;/div&gt;
          &lt;br&gt;
          &lt;div id='middleLeft' onclick='move("middleLeft")'&gt;&amp;nbsp; &lt;/div&gt;
          &lt;div id='middleMiddle' onclick='move("middleMiddle")'&gt;&amp;nbsp; &lt;/div&gt;
          &lt;div id='middleRight' onclick='move("middleRight")'&gt;&amp;nbsp;&lt;/div&gt;
          &lt;br&gt;
          &lt;div id='bottomLeft' onclick='move("bottomLeft")'&gt;&amp;nbsp;&lt;/div&gt;
          &lt;div id='bottomMiddle' onclick='move("bottomMiddle")'&gt;&amp;nbsp;&lt;/div&gt;
          &lt;div id='bottomRight' onclick='move("bottomRight")'&gt;&amp;nbsp;&lt;/div&gt;
        &lt;/div&gt;
        &lt;br&gt;
        &lt;br&gt;
        &lt;br&gt;
        &lt;br&gt;
        &lt;br&gt;
        &lt;div id='winDiv'&gt;
          &lt;h1 id='winHeader'&gt;
            YOU WON!!!
          &lt;/h1&gt;
        &lt;/div&gt;
        &lt;div id='lossDiv'&gt;
          &lt;h1 id='lossHeader'&gt;
            You lost...
          &lt;/h1&gt;
        &lt;/div&gt;
        &lt;div id='tieDiv'&gt;
          &lt;h1 id='tieHeader'&gt;
            It's a tie!
          &lt;/h1&gt;
        &lt;/div&gt;
      &lt;/center&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>var player;
  var computer;
  var playerFirst;
  var topLeftBox = document.getElementById('topLeft');
  var topMiddleBox = document.getElementById('topMiddle');
  var topRightBox = document.getElementById('topRight');
  var middleLeftBox = document.getElementById('middleLeft');
  var middleMiddleBox = document.getElementById('middleMiddle');
  var middleRightBox = document.getElementById('middleRight');
  var bottomLeftBox = document.getElementById('bottomLeft');
  var bottomMiddleBox = document.getElementById('bottomMiddle');
  var bottomRightBox = document.getElementById('bottomRight');
  var winDiv = document.getElementById('winDiv');
  var lossDiv = document.getElementById('lossDiv');
  var ticTacBoard = document.getElementById('ticTacBoard');
  var setup = document.getElementById('setup');
  function getGameUp(){
    setup.style.visibility = "hidden";
    ticTacBoard.style.visibility = "visible";
    if(playerFirst == false){
      computerEasyModeMove();
    }
  }
  
  function move(x){
    if(x=='topLeft'){
      if(topLeftBox.innerHTML != 'o' &amp;&amp; topLeftBox.innerHTML != 'x'){
        topLeftBox.innerHTML = player;
        topLeftBox.style.pointerEvents = 'none';
      }
    }
    if(x=='topMiddle'){
      if(topMiddleBox.innerHTML != 'o' &amp;&amp; topMiddleBox.innerHTML != 'x'){
        topMiddleBox.innerHTML = player;
        topMiddleBox.style.pointerEvents = 'none';
      }
    }
    if(x=='topRight'){
      if(topRightBox.innerHTML != 'o' &amp;&amp; topRightBox.innerHTML != 'x'){
        topRightBox.innerHTML = player;
        topRightBox.style.pointerEvents = 'none';
      }
    }
    if(x=='middleLeft'){
      if(middleLeftBox.innerHTML != 'o' &amp;&amp; middleLeftBox.innerHTML != 'x'){
        middleLeftBox.innerHTML = player;
        middleLeftBox.style.pointerEvents = 'none';
      }
    }
    if(x=='middleMiddle'){
      if(middleMiddleBox.innerHTML != 'o' &amp;&amp; middleMiddleBox.innerHTML != 'x' ){
        middleMiddleBox.innerHTML = player;
        middleMiddleBox.style.pointerEvents = 'none';
      }
    }
    if(x=='middleRight'){
      if(middleRightBox.innerHTML != 'o' &amp;&amp; middleRightBox.innerHTML != 'x'){
        middleRightBox.innerHTML = player;
        middleRightBox.style.pointerEvents = 'none';
      }
    }
    if(x=='bottomLeft'){
      if(bottomLeftBox.innerHTML != 'o' &amp;&amp; bottomLeftBox.innerHTML != 'x'){
        bottomLeftBox.innerHTML = player;
        bottomLeftBox.style.pointerEvents = 'none';
      }
    }
    if(x=='bottomMiddle'){
      if(bottomMiddleBox.innerHTML != 'o' &amp;&amp; bottomMiddleBox.innerHTML != 'x'){
        bottomMiddleBox.innerHTML = player;
        bottomMiddleBox.style.pointerEvents = 'none';
      }
    }
    if(x=='bottomRight'){
      if(bottomRightBox.innerHTML != 'o' &amp;&amp; bottomRightBox.innerHTML != 'x'){
        bottomRightBox.innerHTML = player;
        bottomRightBox.style.pointerEvents = 'none';
      }
    }
    checkWinCondition();
    if(winDiv.style.visibility != 'visible'){
      computerEasyModeMove();
      checkWinCondition();
    }
  }
  
  function computerEasyModeMove(){
    if(player == 'x'){
      computer = 'o';
    }
    if(player == 'o'){
      computer = 'x';
    }
    var computerMove = Math.floor(Math.random() * 9) + 1;
    while(computerMove == 1 &amp;&amp; (topLeftBox.innerHTML == 'o' || topLeftBox.innerHTML == 'x')){
      computerMove = Math.floor(Math.random() * 9) + 1;
    }
     while(computerMove == 2 &amp;&amp; (topMiddleBox.innerHTML == 'o' || topMiddleBox.innerHTML == 'x')){
      computerMove = Math.floor(Math.random() * 9) + 1;
    }
     while(computerMove == 3 &amp;&amp; (topRightBox.innerHTML == 'o' || topRightBox.innerHTML == 'x')){
      computerMove = Math.floor(Math.random() * 9) + 1;
    }
     while(computerMove == 4 &amp;&amp; (middleLeftBox.innerHTML == 'o' || middleLeftBox.innerHTML == 'x')){
      computerMove = Math.floor(Math.random() * 9) + 1;
    }
    while(computerMove == 5 &amp;&amp; (middleMiddleBox.innerHTML == 'o' || middleMiddleBox.innerHTML == 'x')){
      computerMove = Math.floor(Math.random() * 9) + 1;
    }
    while(computerMove == 6 &amp;&amp; (middleRightBox.innerHTML == 'o' || middleRightBox.innerHTML == 'x')){
      computerMove = Math.floor(Math.random() * 9) + 1;
    }
    while(computerMove == 7 &amp;&amp; (bottomLeftBox.innerHTML == 'o' || bottomLeftBox.innerHTML == 'x')){
      computerMove = Math.floor(Math.random() * 9) + 1;
    }
    while(computerMove == 8 &amp;&amp; (bottomMiddleBox.innerHTML == 'o' || bottomMiddleBox.innerHTML == 'x')){
      computerMove = Math.floor(Math.random() * 9) + 1;
    }
    while(computerMove == 9 &amp;&amp; (bottomRightBox.innerHTML == 'o' || bottomRightBox.innerHTML == 'x')){
      computerMove = Math.floor(Math.random() * 9) + 1;
    }
  
    if(computerMove == 1){
        topLeftBox.innerHTML = computer;
        topLeftBox.style.pointerEvents = 'none';
    }
    if(computerMove == 2){
        topMiddleBox.innerHTML = computer;
        topMiddleBox.style.pointerEvents = 'none';
    }
    if(computerMove == 3){
        topRightBox.innerHTML = computer;
        topRightBox.style.pointerEvents = 'none';
    }
    if(computerMove == 4){
        middleLeftBox.innerHTML = computer;
        middleLeftBox.style.pointerEvents = 'none';
    }
    if(computerMove == 5){
        middleMiddleBox.innerHTML = computer;
        middleMiddleBox.style.pointerEvents = 'none';
    }
    if(computerMove == 6){
        middleRightBox.innerHTML = computer;
        middleRightBox.style.pointerEvents = 'none';
    }
    if(computerMove == 7){
        bottomLeftBox.innerHTML = computer;
        bottomLeftBox.style.pointerEvents = 'none';
    }
    if(computerMove == 8){
        bottomMiddleBox.innerHTML = computer;
        bottomMiddleBox.style.pointerEvents = 'none';
    }
    if(computerMove == 9){
        bottomRightBox.innerHTML = computer;
        bottomRightBox.style.pointerEvents = 'none';
    }
  }
  
  
  function computerMediumModeMove(){
  
  }
  
  function computerHardModeMove(){
  
  }
  
  function checkWinCondition(){
    //Top 3 Player
    if(topLeftBox.innerHTML == player &amp;&amp; topMiddleBox.innerHTML == player &amp;&amp; topRightBox.innerHTML == player){
      ticTacBoard.style.pointerEvents = 'none';
      winDiv.style.visibility = 'visible';
    }
    //Top 3 Computer
    if(topLeftBox.innerHTML == computer &amp;&amp; topMiddleBox.innerHTML == computer &amp;&amp; topRightBox.innerHTML == computer){
      ticTacBoard.style.pointerEvents = 'none';
      lossDiv.style.visibility = 'visible';
    }
    //Middle 3 Player
    if(middleLeftBox.innerHTML == player &amp;&amp; middleMiddleBox.innerHTML == player &amp;&amp; middleRightBox.innerHTML == player){
      ticTacBoard.style.pointerEvents = 'none';
      winDiv.style.visibility = 'visible';
    }
    //Middle 3 Computer
    if(middleLeftBox.innerHTML == computer &amp;&amp; middleMiddleBox.innerHTML == computer &amp;&amp; middleRightBox.innerHTML == computer){
      ticTacBoard.style.pointerEvents = 'none';
      lossDiv.style.visibility = 'visible';
    }
    //Bottom 3 Player
    if(bottomLeftBox.innerHTML == player &amp;&amp; bottomMiddleBox.innerHTML == player &amp;&amp; bottomRightBox.innerHTML == player){
      ticTacBoard.style.pointerEvents = 'none';
      winDiv.style.visibility = 'visible';
    }
    //Bottom 3 Computer
    if(bottomLeftBox.innerHTML == computer &amp;&amp; bottomMiddleBox.innerHTML == computer &amp;&amp; bottomRightBox.innerHTML == computer){
      ticTacBoard.style.pointerEvents = 'none';
      lossDiv.style.visibility = 'visible';
    }
    //Left 3 Player (Up and Down)
    if(bottomLeftBox.innerHTML == player &amp;&amp; topLeftBox.innerHTML == player &amp;&amp; middleLeftBox.innerHTML == player){
      ticTacBoard.style.pointerEvents = 'none';
      winDiv.style.visibility = 'visible';
    }
    //Left 3 Computer (Up and Down)
    if(bottomLeftBox.innerHTML == computer &amp;&amp; topLeftBox.innerHTML == computer &amp;&amp; middleLeftBox.innerHTML == computer){
      ticTacBoard.style.pointerEvents = 'none';
      lossDiv.style.visibility = 'visible';
    }
    //Middle 3 Player (Up and Down)
    if(bottomMiddleBox.innerHTML == player &amp;&amp; topMiddleBox.innerHTML == player &amp;&amp; middleMiddleBox.innerHTML == player){
      ticTacBoard.style.pointerEvents = 'none';
      winDiv.style.visibility = 'visible';
    }
    //Middle 3 Computer (Up and Down)
    if(bottomMiddleBox.innerHTML == computer &amp;&amp; topMiddleBox.innerHTML == computer &amp;&amp; middleMiddleBox.innerHTML == computer){
      ticTacBoard.style.pointerEvents = 'none';
      lossDiv.style.visibility = 'visible';
    }
    //Right 3 Player (Up and Down)
    if(bottomRightBox.innerHTML == player &amp;&amp; topRightBox.innerHTML == player &amp;&amp; middleRightBox.innerHTML == player){
      ticTacBoard.style.pointerEvents = 'none';
      winDiv.style.visibility = 'visible';
    }
    //Right 3 Computer (Up and Down)
    if(bottomRightBox.innerHTML == computer &amp;&amp; topRightBox.innerHTML == computer &amp;&amp; middleRightBox.innerHTML == computer ){
      ticTacBoard.style.pointerEvents = 'none';
      lossDiv.style.visibility = 'visible';
    }
    //Diagonal Left to Right Player (Down Slope) 
    if(bottomRightBox.innerHTML == player &amp;&amp; topLeftBox.innerHTML == player &amp;&amp; middleMiddleBox.innerHTML == player){
      ticTacBoard.style.pointerEvents = 'none';
      winDiv.style.visibility = 'visible';
    }
    //Diagonal Left to Right Computer (Down Slope) 
    if(bottomRightBox.innerHTML == computer &amp;&amp; topLeftBox.innerHTML == computer &amp;&amp; middleMiddleBox.innerHTML == computer){
      ticTacBoard.style.pointerEvents = 'none';
      lossDiv.style.visibility = 'visible';
    }
    //Diagonal Right to Left Player (Up Slope) 
    if(bottomLeftBox.innerHTML == player &amp;&amp; topRightBox.innerHTML == player &amp;&amp; middleMiddleBox.innerHTML == player){
      ticTacBoard.style.pointerEvents = 'none';
      winDiv.style.visibility = 'visible';
    }
    //Diagonal Right to Left Computer(Up Slope) 
    if(bottomLeftBox.innerHTML == computer &amp;&amp; topRightBox.innerHTML == computer &amp;&amp; middleMiddleBox.innerHTML == computer){
      ticTacBoard.style.pointerEvents = 'none';
      lossDiv.style.visibility = 'visible';
    }
  }
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#setup{
    background-color:white;
    height:75vh;
    width:75vw;
  }
  #ticTacBoard{
    text-transform:capitalize;
    font-size:0vw;
    background-color:white;
    visibility:hidden;
    position:absolute;
    top:2vh;
  }
  #winDiv{
    visibility:hidden;
    background-color:white;
    position:relative;
    border:2px solid black;
  }
  #lossDiv{
    visibility:hidden;
    background-color:white;
    position:relative;
    border:2px solid black;
  }
  #tieDiv{
    visibility:hidden;
    background-color:white;
    position:relative;
    border:2px solid black;
  }
  #topLeft{
    display:inline-block;
    padding:30px;
    border-right:2px solid black;
    border-bottom:2px solid black;
    width:15vw;
    height:15vh;
    font-size:9vw;
    cursor:pointer;
  }
  #topLeft:hover{
    background-color:lightgrey;
  }
  #topMiddle{
    display:inline-block;
    padding:30px;
    border-bottom:2px solid black;
    width:15vw;
    height:15vh;
    font-size:9vw;
    cursor:pointer;
  }
  #topMiddle:hover{
    background-color:lightgrey;
  }
  #topRight{
    display:inline-block;
    padding:30px;
    border-left:2px solid black;
    border-bottom:2px solid black;
    width:15vw;
    height:15vh;
    font-size:9vw;
    cursor:pointer;
  }
  #topRight:hover{
    background-color:lightgrey;
  }
  #middleLeft{
    display:inline-block;
    padding:30px;
    border-right:2px solid black;
    border-bottom:2px solid black;
    width:15vw;
    height:15vh;
    font-size:9vw;
    cursor:pointer;
  }
  #middleMiddle:hover{
    background-color:lightgrey;
  }
  #middleMiddle{
    display:inline-block;
    padding:30px;
    border-bottom:2px solid black;
    width:15vw;
    height:15vh;
    font-size:9vw;
    cursor:pointer;
  }
  #middleLeft:hover{
    background-color:lightgrey;
  }
  #middleRight{
    display:inline-block;
    padding:30px;
    border-left:2px solid black;
    border-bottom:2px solid black;
    width:15vw;
    height:15vh;
    font-size:9vw;
    cursor:pointer;
  }
  #middleRight:hover{
    background-color:lightgrey;
  }
  #bottomLeft{
    display:inline-block;
    padding:30px;
    border-right:2px solid black;
    width:15vw;
    height:15vh;
    font-size:9vw;
    cursor:pointer;
  }
  #bottomLeft:hover{
    background-color:lightgrey;
  }
  #bottomMiddle{
    display:inline-block;
    padding:30px;
    width:15vw;
    height:15vh;
    font-size:9vw;
    cursor:pointer;
  }
  #bottomMiddle:hover{
    background-color:lightgrey;
  }
  #bottomRight{
    display:inline-block;
    padding:30px;
    border-left:2px solid black;
    width:15vw;
    height:15vh;
    font-size:9vw;
    cursor:pointer;
  }
  #bottomRight:hover{
    background-color:lightgrey;
  }
  body{
    background-color:grey;
  }
  </code></pre>