This is a simple tictactoe game. When I launch my code, the alert to enter 1,2, or 3 for the row only shows up after I press enter. How do I make it show up first each time I put a new entry?

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <title>TikTakToe Game</title>
  </head>
  <body>
       <input type="hidden" id="row">
       <input type="hidden"id="col">
       <input type="hidden" id="O_X" value="">

        <input type="hidden" id="c1" value="___">
        <input type="hidden" id="c2" value="___">
        <input type="hidden" id="c3" value="___">
        <input type="hidden" id="c4" value="___">
        <input type="hidden" id="c5" value="___">
        <input type="hidden" id="c6" value="___">
        <input type="hidden" id="c7" value="___">
        <input type="hidden" id="c8" value="___">
        <input type="hidden" id="c9" value="___">
        <input type="hidden" id="t" value="">


    <script type="text/javascript">
      generateGrid();
      function myFunction(grid) {
        var rowColVal = prompt(grid);
        if(rowColVal != "" ){

          var rowVal = $("#row").val();
          var colVal = $("#col").val();
          var valueOfInputRow = document.getElementById('row').value;
          var valueOfInputCol = document.getElementById('col').value;
          if(valueOfInputRow == ""){
            rowVal = rowColVal;
            if(rowVal == "1" || rowVal == "2" || rowVal == "3"){
              document.getElementById('row').value = rowVal;
            }else{
              alert("Please Enter Row # 1 , 2 or 3");
                generateGrid();
            }
          }else{
            colVal = rowColVal;
            if(colVal == "1" || colVal == "2" || colVal == "3"){
              document.getElementById('col').value = colVal;
            }else{
              alert("Please Enter Col # 1 , 2 or 3");
              generateGrid();
            }
          }

          if (rowVal != "" && colVal != "" ) {
            if(rowVal == "1"){

              if(colVal == "1"){
                document.getElementById('row').value = "";
                document.getElementById('col').value = "";   
                var c1 = $("#c1").val();
                if(c1 != "___"){
                  alert("Row # 1 & Col # 1 Already Filled");
                  generateGrid();

                }else{
                  var o_x = $("#O_X").val();
                  if(o_x == ""){
                    var o_x = " X ";
                     $("#O_X").val(o_x)
                  }else if(o_x == " X "){
                    var o_x = " O ";
                     $("#O_X").val(o_x)
                  }else if(o_x == " O "){
                    var o_x = " X ";
                     $("#O_X").val(o_x)
                  }
                   $("#c1").val(o_x);
                    checkWinner();
                    generateGrid();
                }

              }
           if(colVal == "2"){
                document.getElementById('row').value = "";
                document.getElementById('col').value = "";   
                var c2 = $("#c2").val();
                if(c2 != "___"){
                  alert("Row # 1 & Col # 2 Already Filled");
                  generateGrid();

                }else{
                    var o_x = $("#O_X").val();
                  if(o_x == ""){
                    var o_x = " X ";
                     $("#O_X").val(o_x)
                  }else if(o_x == " X "){
                    var o_x = " O ";
                     $("#O_X").val(o_x)
                  }else if(o_x == " O "){
                    var o_x = " X ";
                     $("#O_X").val(o_x)
                  }
                 $("#c2").val(o_x);
                    checkWinner();
                    generateGrid();
                }
              }
               if(colVal == "3"){

                document.getElementById('row').value = "";
                document.getElementById('col').value = "";   
               var c3 = $("#c3").val();
                if(c3 != "___"){
                  alert("Row # 1 & Col # 3 Already Filled");
                  generateGrid();

                }else{
                    var o_x = $("#O_X").val();
                  if(o_x == ""){
                    var o_x = " X ";
                     $("#O_X").val(o_x)
                  }else if(o_x == " X "){
                    var o_x = " O ";
                     $("#O_X").val(o_x)
                  }else if(o_x == " O "){
                    var o_x = " X ";
                     $("#O_X").val(o_x)
                  }
                   $("#c3").val(o_x);
                    checkWinner();
                    generateGrid();
              }
            }
      }

          if(rowVal == "2"){

              if(colVal == "1"){
                document.getElementById('row').value = "";
                document.getElementById('col').value = "";   
                var c4 = $("#c4").val();
                if(c4 != "___"){
                  alert("Row # 1 & Col # 1 Already Filled");
                  generateGrid();

                }else{
                  var o_x = $("#O_X").val();
                  if(o_x == ""){
                    var o_x = " X ";
                     $("#O_X").val(o_x)
                  }else if(o_x == " X "){
                    var o_x = " O ";
                     $("#O_X").val(o_x)
                  }else if(o_x == " O "){
                    var o_x = " X ";
                     $("#O_X").val(o_x)
                  }
                   $("#c4").val(o_x);
                    checkWinner();
                    generateGrid();
                }

              }

               if(colVal == "2"){
                document.getElementById('row').value = "";
                document.getElementById('col').value = "";   
                var c5 = $("#c5").val();
                if(c5 != "___"){
                  alert("Row # 2 & Col # 2 Already Filled");
                  generateGrid();

                }else{
                   // $("#c2").val(" X ");
                    var o_x = $("#O_X").val();
                  if(o_x == ""){
                    var o_x = " X ";
                     $("#O_X").val(o_x)
                  }else if(o_x == " X "){
                    var o_x = " O ";
                     $("#O_X").val(o_x)
                  }else if(o_x == " O "){
                    var o_x = " X ";
                     $("#O_X").val(o_x)
                  }
                 $("#c5").val(o_x);
                    checkWinner();
                    generateGrid();
                }
              }
               if(colVal == "3"){

                document.getElementById('row').value = "";
                document.getElementById('col').value = "";   
               var c6 = $("#c6").val();
                if(c6 != "___"){
                  alert("Row # 2 & Col # 3 Already Filled");
                  generateGrid();

                }else{
                    var o_x = $("#O_X").val();
                  if(o_x == ""){
                    var o_x = " X ";
                     $("#O_X").val(o_x)
                  }else if(o_x == " X "){
                    var o_x = " O ";
                     $("#O_X").val(o_x)
                  }else if(o_x == " O "){
                    var o_x = " X ";
                     $("#O_X").val(o_x)
                  }
                   $("#c6").val(o_x);
                   checkWinner();
                    generateGrid();
              }
            }
          }

          if(rowVal == "3"){

              if(colVal == "1"){
                document.getElementById('row').value = "";
                document.getElementById('col').value = "";   
                var c7 = $("#c7").val();
                if(c7 != "___"){
                  alert("Row # 3 & Col # 1 Already Filled");
                  generateGrid();
                }else{
                  var o_x = $("#O_X").val();
                  if(o_x == ""){
                    var o_x = " X ";
                     $("#O_X").val(o_x)
                  }else if(o_x == " X "){
                    var o_x = " O ";
                     $("#O_X").val(o_x)
                  }else if(o_x == " O "){
                    var o_x = " X ";
                     $("#O_X").val(o_x)
                  }
                   $("#c7").val(o_x);
                   checkWinner();
                    generateGrid();
                }
              }
               if(colVal == "2"){
                document.getElementById('row').value = "";
                document.getElementById('col').value = "";   
                var c8 = $("#c8").val();
                if(c8 != "___"){
                  alert("Row # 3 & Col # 2 Already Filled");
                  generateGrid();

                }else{
                   // $("#c2").val(" X ");
                    var o_x = $("#O_X").val();
                  if(o_x == ""){
                    var o_x = " X ";
                     $("#O_X").val(o_x)
                  }else if(o_x == " X "){
                    var o_x = " O ";
                     $("#O_X").val(o_x)
                  }else if(o_x == " O "){
                    var o_x = " X ";
                     $("#O_X").val(o_x)
                  }
                 $("#c8").val(o_x);
                  checkWinner();
                    generateGrid();
                }                
              }
               if(colVal == "3"){

                document.getElementById('row').value = "";
                document.getElementById('col').value = "";   
               var c9 = $("#c9").val();
                if(c9 != "___"){
                  alert("Row # 3 & Col # 3 Already Filled");

                  generateGrid();

                }else{
                    var o_x = $("#O_X").val();
                  if(o_x == ""){
                    var o_x = " X ";
                     $("#O_X").val(o_x)
                  }else if(o_x == " X "){
                    var o_x = " O ";
                     $("#O_X").val(o_x)
                  }else if(o_x == " O "){
                    var o_x = " X ";
                     $("#O_X").val(o_x)
                  }
                   $("#c9").val(o_x);
                    checkWinner();
                    generateGrid();
              }
            }
          }
          }else if(rowVal != "" && colVal == ""){

          alert("Please Enter Col 1 2 or 3");
             generateGrid();
          }
        }else{
          alert("Please Enter  Row 1 2 or 3");
             generateGrid();
        }
      }

function generateGrid(){
  var c1 = $("#c1").val();
  var c2 = $("#c2").val();
  var c3 = $("#c3").val();
  var c4 = $("#c4").val();
  var c5 = $("#c5").val();
  var c6 = $("#c6").val();
  var c7 = $("#c7").val();
  var c8 = $("#c8").val();
  var c9 = $("#c9").val();


  var grid = " "+c1+" "+"| "+c2+" | "+c3+" \n"+
             " "+c4+" "+"| "+c5+" | "+c6+" \n"+
             " "+c7+" "+"| "+c8+" | "+c9+" \n";

  myFunction(grid);
}

function checkWinner(){
  var c1 = $("#c1").val();
  var c2 = $("#c2").val();
  var c3 = $("#c3").val();
  var c4 = $("#c4").val();
  var c5 = $("#c5").val();
  var c6 = $("#c6").val();
  var c7 = $("#c7").val();
  var c8 = $("#c8").val();
  var c9 = $("#c9").val();

    if( (c1 == c2) && (c1 == c3) && ( c1 != "___" && c2 != "___" && c3 != "___" )){
    alert(c1+" is Winer");

    newGame();


    }else if( (c4 == c5) && (c4 == c6) && ( c4 != "___" && c5 != "___" && c6 != "___" )){
      alert(c4+" is Winer");
      newGame();
    }else if( (c7 == c8) && (c7 == c9) && ( c7 != "___" && c8 != "___" && c9 != "___" ) ){
      alert(c7+" is Winer");
      newGame();

    }else if( (c1 == c5) && (c1 == c9) && ( c1 != "___" && c5 != "___" && c9 != "___" )){
      alert(c1+" is Winer");
      newGame();
    }else if( (c3 == c5) && (c3 == c7) && ( c3 != "___" && c5 != "___" && c7 != "___" )){
      alert(c3+" is Winer");
      newGame();
    }else if( (c1 == c4) && (c1 == c7) && ( c1 != "___" && c4 != "___" && c4 != "___" )){
      alert(c1+" is Winer");
      newGame();
    }else if( (c2 == c5) && (c2 == c8) && ( c2 != "___" && c5 != "___" && c8 != "___" )){
      alert(c2+" is Winer");
      newGame();
    }else if( (c3 == c6) && (c3 == c9) && ( c3 != "___" && c6 != "___" && c9 != "___" )){
      alert(c3+" is Winer");
      newGame();
    }else{
       var t = Number($("#t").val());
        if(t == 0){

          t=1;
          $("#t").val(t);
        }else{
          t+=t;
          $("#t").val(t);
        }
        if(t == "256"){
          alert("Game Draw");
          newGame();
        }else{
          generateGrid();
        }

    }  


}
function newGame(){
  alert("New Game Start");
  $("#c1").val("___");
    $("#c2").val("___");
    $("#c3").val("___");
    $("#c4").val("___");
    $("#c5").val("___");
    $("#c6").val("___");
    $("#c7").val("___");
    $("#c8").val("___");
    $("#c9").val("___");
    $("#t").val("");
     generateGrid();

}
</script>

  </body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.21 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.