gpt4 book ai didi

javascript - TicTacToe 按钮继续以直线而不是网格显示

转载 作者:行者123 更新时间:2023-11-29 22:46:02 25 4
gpt4 key购买 nike

我正在使用 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com