表格格式問題和功能不起作用

我編寫了一個簡單的井字遊戲。當桌子出現時，它全部被擠壓。有沒有辦法讓桌子空了，但沒有擠壓？另外，我正在使用NotePad ++，當我嘗試在FireFox中運行我的程序時，這些功能不起作用。我不確定爲什麼，有人知道嗎？我可以在Chrome中使用它，但它需要能夠在FireFox中工作。下面是我的程序：表格格式問題和功能不起作用

<html> 
<head> 
    <style> 
     .Square{ 
     width:60px; 
     height 60px; 
     text-align:center; 
     font-size: 18pt; 
     font-weight: bold; 
     font-family: Verdana; 
     } 
    </style> 

     <script> 
      function startGame() 
       { 
        for (var i = 1; i<= 9; i = i + 1) 
        { 
         clearBox(i); 
        } 

       document.turn = "X"; 
       if (Math.random()< 0.5) 
       { 
        document.turn = "O"; 
       } 
       document.winner = null; 
       setMessage(document.turn + " gets to start."); 
      } 

      function setMessage(msg) 
      { 
      document.getElementById("message").innerText = msg; 
      } 

      function nextMove(square) 
      { 
       if (document.winner != null) 
       { 
        setMessage(document.winner + " Already Wone the Game!"); 
       } 
       else if (square.innerText == "") 
       { 
        square.innerText = document.turn; 
        switchTurn(); 
       } 
       else 
       { 
        setMessage("That Square is Already Used.") 
       } 
      } 

      function switchTurn() 
      { 
       if(checkForWinner(document.turn)) 
       { 
        setMessage("Contratulations " + document.turn + "! You Win!"); 
        document.winner = document.turn; 
       } 
        else if (document.turn == "X") 
         { 
          document.turn ="O"; 
          setMessage("It's " + document.turn + "'s turn!"); 
         } 
        else 
        { 
         document.turn ="X"; 
         setMessage("It's " + document.turn + "'s turn!"); 
        } 
      } 

      function checkForWinner(move) 
      { 
       var result = false; 
       if(checkRow(1,2,3, move) || 
        checkRow(4,5,6, move) || 
        checkRow(7,8,9, move) || 
        checkRow(1,4,7, move) || 
        checkRow(2,5,8, move) || 
        checkRow(3,6,9, move) || 
        checkRow(1,5,9, move) || 
        checkRow(3,5,7, move)) 
        { 
        result = true; 
        } 
        return result; 
      } 

      function checkRow(a,b,c, move) 
      { 
       var result = false; 
       if (getBox(a)== move && getBox(b)== move && getBox(c)== move) 
       { 
       result = true; 
       } 
       return result; 
      } 

      function getBox(number) 
      { 
       return document.getElementById("s" + number).innerText; 
      } 

      function clearBox(number) 
      { 
       document.getElementById("s" + number).innerText = ""; 
      } 

     </script> 

</head> 

<body onload= "startGame();"> 
    <h1> Tic-Tac-Toe!</h1> 
    <div id="message">message will be here </div> 
    <table border= "1"> 
     <tr> 
      <td id="s1" class= "Square" onclick="nextMove(this);"></td> 
      <td id="s2" class= "Square" onclick="nextMove(this);"></td> 
      <td id="s3" class= "Square" onclick="nextMove(this);"></td> 
     </tr> 
     <tr> 
      <td id="s4" class= "Square" onclick="nextMove(this);"></td> 
      <td id="s5" class= "Square" onclick="nextMove(this);"></td> 
      <td id="s6" class= "Square" onclick="nextMove(this);"></td> 
     </tr> 
     <tr> 
      <td id="s7" class= "Square" onclick="nextMove(this);"></td> 
      <td id="s8" class= "Square" onclick="nextMove(this);"></td> 
      <td id="s9" class= "Square" onclick="nextMove(this);"></td> 
     </tr> 
    </table> 
    <a href= "javascript:startGame();"> Start New Game</a> 
</body> 
</html>

來源

2015-02-08 retrogirl19

'的document.getElementById（「的」 +號）.innerText = 「」;' – dandavis 2015-02-08 03:41:17

您在height: 60px;

忘了:height後最初，我建議增加td {height: 40px;}但是......只要加入:，你會沒事的。

<style> 

    td {height: 40px;} //nevermind, you don't need this 

    .Square{ 
     width:60px; 
     height: 60px; //I JUST REALIZED YOU FORGOT A : 
     text-align:center; 
     font-size: 18pt; 
     font-weight: bold; 
     font-family: Verdana; } 

</style>

來源

2015-02-08 03:30:20 cake

謝謝你這麼多！ – retrogirl19 2015-02-08 03:32:06

@ retrogirl19我剛剛意識到 - 你實際上只是在高度後忘了'：'。你不需要整個'td'命令>。<。哎呦。 – cake 2015-02-08 03:36:12

這一切都很好！還是謝謝！ – retrogirl19 2015-02-08 03:38:10

Replace 

    <style> 
     .Square{ 
     width:60px; 
     height 60px; 
     text-align:center; 
     font-size: 18pt; 
     font-weight: bold; 
     font-family: Verdana; 
     } 
    </style> 

With 

<style> 
     .Square{ 
     width:60px; 
     height:60px; 
     text-align:center; 
     font-size: 18pt; 
     font-weight: bold; 
     font-family: Verdana; 
     } 
    </style> 

you missed : after height.

來源

2015-02-08 06:53:27 Rajashekhar

表格格式問題和功能不起作用

回答

相關問題