Element Changes on 1st Click, but will not revert back on second click

Question

1st click displays "X", then it changes to "O". but it doesn't change to "X" again

I am trying to make a tic tac toe game in javascript.

The first click displays "X" and then the second click displays "O" as I intend it to be. However on subsequent clicks only "O" is displayed, i.e. it doesn't change back to "X".

    function startGame(){                             
        //To display whose turn it is
        document.turn="X";
        setMessage(document.turn + " gets to start");
    }
    
    function setMessage(msg){                          
       //gets the message div and puts value = msg
       document.getElementById("message").innerText= msg;
    }
    
    function nextMove(square){                        
        square.innerText= document.turn;
        switchTurn();
    }
    
    function switchTurn(){
        if(document.turn="X"){
            document.turn="O";
        }else{
            document.turn="X";
        }
    }

  <body onload="startGame();">                       
        <div id="message">Messages will go here</div>
        <table border=0>
            <td>
                <table border=1>
                 <tr>
                  <td class="box" onclick="nextMove(this);"></a></td>
               <td class="box" onclick="nextMove(this);"></a></td>
                  <td class="box" onclick="nextMove(this);"></a></td>
                 </tr>
              <tr>
                  <td class="box" onclick="nextMove(this);"></a></td>
               <td class="box" onclick="nextMove(this);"></a></td>
               <td class="box" onclick="nextMove(this);"></a></td>
              </tr>
              <tr>
                  <td class="box" onclick="nextMove(this);"></a></td>
               <td class="box" onclick="nextMove(this);"></a></td>
               <td class="box" onclick="nextMove(this);"></a></td>
              </tr>
             </table>
            </td>
            <td>
                <table>
                 <tr>
                        <td><input type=text size=5 id="player1" value=0></td>
                        <td>Player1</td>
                    </tr>
              <tr>
                        <td><input type=text size=5 id="player2" value=0></td>
                        <td>Player2</td>
                    </tr>
              <tr>
                        <td><input type=text size=5 id="ties"  value=0></td>
                        <td>Ties</td>
                    </tr>
             </table>
            </td> 
        </table>
    </body>

Possible duplicate of [Which equals operator (== vs ===) should be used in JavaScript comparisons?](https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons) — Jonas Wilms, Jul 31 '17 at 15:39

score 4 · Answer 1 · answered Jul 31 '17 at 15:42

4

You're assigning in your conditional.

function switchTurn(){
  if(document.turn="X"){
    document.turn="O";
  } else {
    document.turn="X";
  }
}

When your code reaches that if(), it's making document.turn "X" and returning a truthy value, then immediately turning around and making it "O".

You'll want to use === there instead:

function switchTurn(){
  if(document.turn==="X"){
    document.turn="O";
  } else {
    document.turn="X";
  }
}

answered Jul 31 '17 at 15:42

Erik Butcher

41
3

Don't feel too bad, @Singhal_Anukul. Every programmer has made this error... just remember to check for it when things aren't working like you'd expect! – McHat Jul 31 '17 at 19:14

Element Changes on 1st Click, but will not revert back on second click

1 Answers1