Кнопки TicTacToe продолжают отображаться в виде прямой линии вместо сетки

Question 1

Я создаю игру Tic Tac Toe с помощью JavaScript и JQuery, и кнопки отображаются неправильно, потому что я не могу понять линию разрыва

Я пробовал несколько различных решений через Reddit, но ни один из них не работал.

   <!DOCTYPE html>
<html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <title>Tic Tac Toe</title>
    <style>
    button {
    font-size:40px;
    height:100px;
    width:100px;
    }
    .winclass{
        background-color: red;
    }
    </style>
    </head>
        <body onload="createButtons(row, col)">
        <div id="buttonArea">
        </div>
        <input type="button" id="btnNewGame" onClick="resetButtons()" value="ResetButtons"/></input>
        <script>
        var grid = 2;
            while (grid < 3){
                var grid = parseInt(prompt("Enter grid size: "));
                if (grid < 3){
                    alert("Grid size must be 3 or more");
                }
            }
            var col = grid;
            var row = col;
            var dCheck = true;

        function createButtons(row,col){
                var $counter = 1;
                var $element = $("#buttonArea")
                for (countR = 1; countR <= row;  countR++){
                    for (countC = 1; countC <= col; countC++){

                var $newButton = $("<button type='button' />");
                $newButton.appendTo($element).attr("onClick", "selected(this)").attr("id", "btn"+$counter++);
                }
                        var breakLine = document.createElement("br");
                        //$element.appendChild(breakLine);
                    }
            }
            function selected(butObj){
                butObj.innerHTML = "X";
                butObj.disabled = true;
                checkWinD2("X", row, col);
                checkWinD1("X", row, col);
                checkWinH("X", row, col);
                checkWinV("X", row, col);
                AITurn();
                checkWinD2("O", row, col);
                checkWinD1("O", row, col);
                checkWinH("O", row, col);
                checkWinV("O", row, col);
                if(dCheck == true){
                    drawCheck();
                }
            }

        </script>
        </body> 
</html>

Таким образом, он печатает кнопки по прямой линии вместо сетки 3x3.

javascript jquery

2

user12260021 26 Окт 2019 в 22:48

Разместите достаточно кода, чтобы мы могли воспроизвести вашу проблему.

–

Scott Marcus

26 Окт 2019 в 22:53

Я добавил еще код

–

user12260021

26 Окт 2019 в 22:58

Answer

Вы только что отключили добавление кода <br/ >:

 for (countR = 1; countR <= row;  countR++){
     for (countC = 1; countC <= col; countC++){
     var $newButton = $("<button type='button' />");
     $newButton.appendTo($element).attr("onClick", "selected(this)").attr("id", "btn"+$counter++);
     }
      $('<br/>').appendTo($element);  // this is the missing line
 }

Обратите внимание, что document.createElement("br"); не является элементом jQuery

0

Ashkan Mobayen Khiabani 26 Окт 2019 в 23:55

Question 2

Вы только что отключили добавление кода <br/ >:

 for (countR = 1; countR <= row;  countR++){
     for (countC = 1; countC <= col; countC++){
     var $newButton = $("<button type='button' />");
     $newButton.appendTo($element).attr("onClick", "selected(this)").attr("id", "btn"+$counter++);
     }
      $('<br/>').appendTo($element);  // this is the missing line
 }

Обратите внимание, что document.createElement("br"); не является элементом jQuery

0

Ashkan Mobayen Khiabani 26 Окт 2019 в 23:55

Кнопки TicTacToe продолжают отображаться в виде прямой линии вместо сетки

1 ответ

Похожие вопросы

Новые вопросы

javascript