CODEWITHSUNDEEP
javascript
Jason Hyungchul Kang
Jason Hyungchul Kang

Reputation: 173

Tic Tac Toe JavaScript Help (I am not getting the alert that I want)

Here is the html for my Tic-Tac-Toe game:

<html>
<head>
<title>Tic Tac Toe</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Tic-Tac-Toe</h1>
<div id="message"></div>

<table border="3">
    <tr>
        <td class="Square" id="s1" onclick="nextMove(this);"></td>
        <td class="Square" id="s2" onclick="nextMove(this);"></td>
        <td class="Square" id="s3" onclick="nextMove(this);"></td>
    </tr> 
    <tr>
        <td class="Square" id="s4" onclick="nextMove(this);"></td>
        <td class="Square" id="s5" onclick="nextMove(this);"></td>
        <td class="Square" id="s6" onclick="nextMove(this);"></td>
    </tr> 
    <tr>
        <td class="Square" id="s7" onclick="nextMove(this);"></td>
        <td class="Square" id="s8" onclick="nextMove(this);"></td>
        <td class="Square" id="s9" onclick="nextMove(this);"></td>
    </tr> 
</table>

</div>

<script type="text/javascript" src="app.js"></script> 
</body>
</html>

My JavaScript code is below.

var turn = "X";


function setMessage(msg) {
document.getElementById("message").innerText = msg;
 }

function nextMove(square) {
   if (square.innerHTML == "X" || square.innerHTML == "O") {
       alert('It has already been selected'); 
   } else {
       square.innerText = turn;
       switchTurn();
    }   
};

function switchTurn() {
   if (checkforWinner(turn)) { 
      alert("Congratulations, " + turn + "! You win");
    } else if (turn == "X") {
        turn = "O";
     setMessage("It's " + turn + "'s turn!");
     } else {
        turn = "X";
  setMessage("It's " + turn + "'s turn!");
   }

}

function checkforWinner(move) {
   var result = false;
   if (checkRow(1,2,3, move) || 
       checkRow(4,5,6, move) ||
       checkRow(7,8,9, move) ||
       checkRow(1,4,7, move) ||
       checkRow(2,5,8, move) ||
       checkRow(3,6,9, move) ||
       checkRow(1,5,9, move) ||
       checkRow(3,5,7, move)) {

       result = true;
}
      return result;
 }

 function checkRow(a,b,c, move) {
     var result = false;
     if (getBox(a) === move && getBox(b) === move && getBox(c) === move) {
          result = true;
    }

return result; 
}

function getBox(number) {
document.getElementById("s" + number).innerText

}

After the user wins from getting three straight O's or X's in all the possible ways, I want an alert saying that "Congratulations, X/Y! You win"

I made an if(checkforWinner(turn)) { and an alert right after that says alert("Congratulations, " + turn + "! You win"); within the switchTurn function. However, when I tested my code, the alert will not pop up after the user gets three straight O's or X's.

Is there actually an issue with the code or did I place the code where I wasn't supposed to? I have absolutely no idea.

Upvotes: 0

Views: 186

Answers (2)

thejump
thejump

Reputation: 33

Here is one solution:

var turn = "X";

function setMessage(msg) {
document.getElementById("message").innerText = msg;
 }

function nextMove(square) {
   if (square.innerHTML == "X" || square.innerHTML == "O") {
       alert('This space has already been selected'); 
   } else {
       square.innerText = turn;
       switchTurn();
    }   
};

function switchTurn() {
   if (checkforWinner(turn)) { 
      alert("Congratulations, " + turn + "! You win");
    } else if (turn == "X") {
        turn = "O";
     setMessage("It's " + turn + "'s turn!");
     } else {
        turn = "X";
  setMessage("It's " + turn + "'s turn!");
   }

}

function checkforWinner() {
  var result = false;
  if (checkRow(1,2,3, turn) || 
     checkRow(4,5,6, turn) ||
     checkRow(7,8,9, turn) ||
     checkRow(1,4,7, turn) ||
     checkRow(2,5,8, turn) ||
     checkRow(3,6,9, turn) ||
     checkRow(1,5,9, turn) ||
     checkRow(3,5,7, turn)) {

    result = true;
  } 
      return result;
 }

 function checkRow(a,b,c, move) {
  var result = false;
  if (getBox(a) === move && getBox(b) === move && getBox(c) === move) {
    result = true;
  }

  return result; 
}

function getBox(number) {
  return document.getElementById("s" + number).innerHTML;
}

A big part of the issue was that getBox() wasn't returning anything so it was undefined variables going straight up the chain of functions. Also turn is a global variable so you can use that without passing it into checkforWinner().

Upvotes: 0

ergonaut
ergonaut

Reputation: 7057

I think you forgot to return:

function getBox(number) {
    return document.getElementById("s" + number).innerText
}

Upvotes: 2

Related Questions