0

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;
}   

}
  • Because the `var player_one = 1;` is inside the function `display_input` which means it is local. Having that said every time you click `td` `player_one` would be equal to `1`. To fix this, just put the `var player_one = 1;` outside the function before (on top of the code) Also read about JavaScript variable scope – ziGi Dec 11 '14 at 00:35
  • Oh that's kinda humiliating on my part. Thanks for the help kind sir! Could you please give some more elaboration though? –  Dec 11 '14 at 00:37
  • In a few words, when your javascript loads and you have the variable outside of the function it will execute only once. It is an initialization more or less. After that every time you click a button only the function will execute (and it will check the current value which when initialized is 1). This article should clarify what scope means in JS: http://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript – ziGi Dec 11 '14 at 00:47

1 Answers1

2

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;
    }   
}
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • @Bergi wow, I see how you have made the 113k, please consider your pushiness. – ziGi Dec 11 '14 at 00:50
  • @Bergi, I am just kidding, it is true though, that many people don't accept and answer and it is a bit irritating sometimes. – ziGi Dec 11 '14 at 00:59
  • Sorry I was afk. You answer is now successfully accepted :) –  Dec 11 '14 at 01:10