Question

第一次点击显示＆＃34; X＆＃34;，然后它变为＆＃34; O＆＃34;。但它并没有变成＆＃34; X＆＃34;再次

我想在javascript中制作一个tic tac toe游戏。

第一次点击显示＆＃34; X＆＃34;然后第二次点击显示＆＃34; O＆＃34;正如我打算那样。然而，仅在随后的点击中＆＃34; O＆＃34;显示，即它不会改回＆＃34; X＆＃34;。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您要在条件中进行分配。

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

当你的代码到达if（）时，它正在制作document.turn“X”并返回一个真值，然后立即转身并使其成为“O”。

你会想要使用===：

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

第一次单击时元素更改，但第二次单击时不会还原

1 个答案: