मैं जावास्क्रिप्ट और JQuery के साथ एक TicTacToe गेम बना रहा हूं और बटन गलत तरीके से प्रदर्शित हो रहे हैं क्योंकि मैं ब्रेकलाइन का पता नहीं लगा सकता

मैंने 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 ग्रिड के बजाय एक सीधी रेखा में बटनों को प्रिंट करता है

2
user12260021 26 अक्टूबर 2019, 22:48

1 उत्तर

सबसे बढ़िया उत्तर

आपने अभी-अभी <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, 20:55