元素第一次點擊變更，但不會恢復第二次點擊

第一次點擊顯示「X」，然後變爲「O」。但它不會再變爲「X」元素第一次點擊變更，但不會恢復第二次點擊

我想在javascript中製作一個tic tac toe遊戲。

第一次點擊顯示「X」，然後第二次點擊顯示「O」，正如我打算的那樣。然而，在隨後的點擊中，只顯示「O」，即它不會變回「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> 
 
      \t  <tr> 
 
      \t \t  <td class="box" onclick="nextMove(this);"></a></td> 
 
      \t \t \t <td class="box" onclick="nextMove(this);"></a></td> 
 
      \t \t  <td class="box" onclick="nextMove(this);"></a></td> 
 
      \t  </tr> 
 
      \t \t <tr> 
 
      \t \t  <td class="box" onclick="nextMove(this);"></a></td> 
 
      \t \t \t <td class="box" onclick="nextMove(this);"></a></td> 
 
      \t \t \t <td class="box" onclick="nextMove(this);"></a></td> 
 
      \t \t </tr> 
 
      \t \t <tr> 
 
      \t \t  <td class="box" onclick="nextMove(this);"></a></td> 
 
      \t \t \t <td class="box" onclick="nextMove(this);"></a></td> 
 
      \t \t \t <td class="box" onclick="nextMove(this);"></a></td> 
 
      \t \t </tr> 
 
      \t </table> 
 
      </td> 
 
      <td> 
 
       <table> 
 
      \t  <tr> 
 
         <td><input type=text size=5 id="player1" value=0></td> 
 
         <td>Player1</td> 
 
        </tr> 
 
      \t \t <tr> 
 
         <td><input type=text size=5 id="player2" value=0></td> 
 
         <td>Player2</td> 
 
        </tr> 
 
      \t \t <tr> 
 
         <td><input type=text size=5 id="ties" value=0></td> 
 
         <td>Ties</td> 
 
        </tr> 
 
      \t </table> 
 
      </td> 
 
     </table> 
 
    </body>

來源

2017-07-31 Singhal_Anukul

'如果（document.turn = 「X」）{'應該使用''===不是'=' – Pointy

我們之前進入任何一個，你的HTML是無效的。 –

[在JavaScript比較中應該使用[等於運算符（== vs ===）]的可能重複嗎？]（https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used -in-javascript-comparisons） –

你分配你的條件。

當代碼到達，如果（），它使document.turn「X」並返回一個值truthy，然後立刻扭轉，使之「O」。

您需要使用===有代替：

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

來源

2017-07-31 15:42:38

感覺不錯，@Singhal_Anukul。每個程序員都犯了這個錯誤......只要記得在事情不像你期望的那樣工作時檢查它！ – McHat

元素第一次點擊變更，但不會恢復第二次點擊

回答

相關問題