Tic Tac Toe - Returning marked square number

Question

I'm trying to buld a Tic Tac Toe game using JavaScript; I have my table (HTML):

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

  </table>

and JavaScript:

var tie = 0;
var move = 1;
function startGame(){
    for(var i =1; i < 10 ; i++){ //clears all squares
        clearBox(i)
    }
    tie=0;
    document.turn = "X";

    if(Math.random() < 0.5){
        document.turn = "O";
    }
    document.winner = null;
    setMessage(document.turn + " gets to start");
}

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

}

function setMoves(num){
        if(num == 1)    
            document.getElementById("one").innerText = "player " + document.turn + " selected square " ;
        else if (num == 2)
            document.getElementById("two").innerText = "player " + document.turn + " selected square " ;
        else if (num == 3)
            document.getElementById("tree").innerText = "player " + document.turn + " selected square " ;
        else if (num == 4)
            document.getElementById("four").innerText = "player " + document.turn + " selected square " ;
        else if (num == 5)
            document.getElementById("five").innerText = "player " + document.turn + " selected square " ;
        else if (num == 6)
            document.getElementById("six").innerText = "player " + document.turn + " selected square " ;
        else if (num == 7)
            document.getElementById("seven").innerText = "player " + document.turn + " selected square " ;
        else if (num == 8)
            document.getElementById("eight").innerText = "player " + document.turn + " selected square " ;
        else if (num == 9)
            document.getElementById("nine").innerText = "player " + document.turn + " selected square " ;


}

function nextMove(square){

    if(document.winner != null){
        setMessage(document.winner + " already won the game, please start over");
    }else if(square.innerText == ""){
        square.innerText = document.turn;
        switchTurn();
    }else{
        setMessage("That square is already used!");
    }

    setMoves(tie);

}


function switchTurn(){

    tie++;
    if(checkForWinner(document.turn)){
        setMessage(document.turn + " Won!!!");
        document.winner = document.turn;
    }else if(document.turn == "X"){
        document.turn = "O";
        setMessage("its " + document.turn + " turn");
    }else{
        document.turn = "X";
        setMessage("its " + document.turn + " turn");
    }

    setMoves(tie);

    if(checkTie())
        setMessage("its a tieeeeeeeeeeeeeeeeeeeeeeeeeee"); ///////////////////////////////////////////////////////////////////////////////////


}

function clearBox(number){
    document.getElementById("s" + number).innerText = "";
}

function tieeeOne(number){
    return document.getElementById("s" + number).innerText != "";
}

function checkTie(){
    var flg = false;
    for(i=0; i<10; i++)
        if (tieeeOne())
        {
            flg=true;
        }
    return flg;
}

function checkForWinner(move){
    var result = false;
    if(checkRow(1,2,3,move) || checkRow(4,5,6,move) || checkRow(7,8,9,move) //rows
        ||  checkRow(1,4,7,move) || checkRow(2,5,8,move) || checkRow(3,6,9,move) //cols
        ||  checkRow(1,5,9,move) || checkRow(3,5,7,move)){ //diagonal
        result = true;
    }
    return result;
}

function checkForTie(a, b, c, d, e, f, g, h, i)
{
    var tie = false;
    if(getBox(a) == move && getBox(b) == move && getBox(c) == move
    && getBox(d) == move && getBox(e) == move && getBox(f) == move
    && getBox(g) == move && getBox(h) == move && getBox(i) == move){
        tie = true;
    }
    return tie;
}

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).innerText;
}

I want to build a function which will return the number of the last marked square (1-9), is this possible? I want to create a log and I need to know which square had been marked?

Answer 1

An easy way to do this is to create a global variable that would be set in your nextMove() function. You would create a variable

var lastMove;

Then you could set it the variable by using the <td> element's id.

function nextMove(square) {

if (document.winner != null) {
    setMessage(document.winner + " already won the game, please start over");
} else if (square.innerText == "") {
    square.innerText = document.turn;

    // Code to set variable goes here  

    switchTurn();
} else {
    setMessage("That square is already used!");
}

setMoves(tie);

}

Answer 2

You can create a global variable lastMove and set it in nextMove(). Just assign lastMove = square.id; Then just make sure you clear that out in your new game logic.