Search code examples
javascripthtmlif-statementtic-tac-toe

How to switch between players in a Javascript tic tac toe game

I'm still a newbie in JS, would appreciate the help and any sort of explanations. So here I go; I don't have the slightest clue why my following code is not switching between "X"s and "O"s each time one of the two players clicks on whatever case they want. One thing is for sure something is wrong with the logic of my if statements.

My html is as follows:

<!DOCTYPE html>
<html>
<head>
    <title>Tic Tac Toe</title>
    <script text="javascript" src="tic.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<center>
<body>
    <h1 style="font-family:arial;">Tic-Tac-Toe</h1>
    <table>
    <tr>
        <td id = "case1" onclick="display_input('case1')"></td>
        <td id = "case2" onclick="display_input('case2')"></td>
        <td id = "case3" onclick="display_input('case3')"></td>
    </tr>
    <tr>
        <td id = "case4" onclick="display_input('case4')"></td>
        <td id = "case5" onclick="display_input('case5')"></td>
        <td id = "case6" onclick="display_input('case6')"></td>
    </tr>
    <tr>
        <td id = "case7" onclick="display_input('case7')"></td>
        <td id = "case8" onclick="display_input('case8')"></td>
        <td id = "case9" onclick="display_input('case9')"></td>
    </tr>
</table>
<footer>
    <p>Copyright&copy; 2014</p>
</footer>
</body>
</center>   
</html>

Javascript:

function display_input(square){ 

var player_one = 1;
if ( player_one == 1 ){
    document.getElementById(square).innerHTML = "X";
    player_one = 0;

} else {
    document.getElementById(square).innerHTML = "O";    
    player_one = 1;
}   

}
Solution

  • On every call of display_input, you intialise a new player_one variable with the same value: 1. Move the declaration outside of the function, so that subsequent calls will actually toggle the (one) higher-scoped variable:

    var player_one = 1;
function display_input(square){ 
    if ( player_one == 1 ){
        document.getElementById(square).innerHTML = "X";
        player_one = 0;
    } else {
        document.getElementById(square).innerHTML = "O";    
        player_one = 1;
    }   
}