Saya membuat game TicTacToe dengan JavaScript dan JQuery dan tombol-tombolnya tidak ditampilkan dengan benar karena saya tidak dapat menemukan breakLine

Saya sudah mencoba beberapa solusi berbeda yang ditawarkan melalui reddit dan tidak ada yang berhasil

   <!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>

Jadi itu mencetak tombol dalam garis lurus, bukan kotak 3x3

2
Anonymous 26 Oktober 2019, 22:48

1 menjawab

Jawaban Terbaik

Anda baru saja menonaktifkan kode yang menambahkan <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
 }

Perhatikan bahwa document.createElement("br"); bukan elemen jQuery

0
Ashkan Mobayen Khiabani 26 Oktober 2019, 20:55