Я создаю игру TicTacToe с JavaScript и JQuery, и кнопки отображаются неправильно, потому что я не могу понять breakLine
Я пробовал несколько различных предлагаемых решений с помощью 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