Javascript 表格格式问题和功能不起作用_Javascript_Html_Function_Firefox_Html Table

Javascript 表格格式问题和功能不起作用

javascript html function firefox

Javascript 表格格式问题和功能不起作用,javascript,html,function,firefox,html-table,Javascript,Html,Function,Firefox,Html Table,我编写了一个简单的井字游戏。当桌子出现时，它全被压扁了。有没有办法让桌子空着但不被压扁？另外，我使用的是记事本+，当我试图在FireFox中运行我的程序时，这些函数不起作用。我不知道为什么，有人知道吗？我可以让它在Chrome中工作，但它需要能够在FireFox中工作。这是我的节目： <html> <head> <style> .Square{ width:60px; height 60px;

我编写了一个简单的井字游戏。当桌子出现时，它全被压扁了。有没有办法让桌子空着但不被压扁？另外，我使用的是记事本+，当我试图在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>

您忘记了a:高度后的高度：60px

最初，我建议添加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>

@我刚刚意识到——你实际上只是忘记了a:身高之后。您不需要整个td命令>.document.getElementByIds+number.innerText=；

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.