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>