Jogo Galo javascript

<!DOCTYPE html>
<html>
<head>
    <title>Jogo do Galo</title>
    <style type="text/css">
        h1{
            color: red;
            font-size:40px;
            text-align: center;
            font-family: "Arial";
        }
        h3{
            text-align: center;
            font-family: "montserrat";
            font-size: 30px;
        }
        table, td, tr{
            border-collapse: collapse;
            border: 1px solid black;
            margin: auto;
        }

        td{
            width: 150px;
            height: 150px;
            font-size: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Jogo Do Galo</h1>
    <table>
        <tr>
            <td id="a1" onclick="sinal(1);">&nbsp;</td>
            <td id="a2" onclick="sinal(2);">&nbsp;</td>
            <td id="a3" onclick="sinal(3);">&nbsp;</td>
        </tr>
        <tr>
            <td id="a4" onclick="sinal(4);">&nbsp;</td>
            <td id="a5" onclick="sinal(5);">&nbsp;</td>
            <td id="a6" onclick="sinal(6);">&nbsp;</td>
        </tr>
        <tr>
            <td id="a7" onclick="sinal(7);">&nbsp;</td>
            <td id="a8" onclick="sinal(8);">&nbsp;</td>
            <td id="a9" onclick="sinal(9);">&nbsp;</td>
        </tr>
    </table>
    <h3>Jogador 1:</h3>
    <h3>Jogador 2:</h3>
    <h3>Empate:</h3>

    <script type="text/javascript">
        var j='O';
        function sinal(x){
            if (document.getElementById('a'+x).innerHTML == '&nbsp;'){
                if (j=='O'){
                    document.getElementById('a'+x).innerHTML = j;
                    j = 'X';
                }
                else{
                    document.getElementById('a'+x).innerHTML = j;
                    j = 'O';
                }
            }
            else{
                alert("Casa já ocupada");
            }
        }
    </script>

</body>
</html>