我正在使用 JavaScript 和 JQuery 创建一个 TicTacToe 游戏，但按钮显示不正确，因为我无法确定 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 网格打印出按钮
最佳答案
您刚刚禁用了附加 <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 元素
关于javascript - TicTacToe 按钮继续以直线而不是网格显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58574179/