我正在使用 JavaScript 制作贪吃蛇和梯子游戏。我想将由 create Board(dimension) 函数生成的游戏板插入到一个 div 中，但出现的是 [object Object]。
var gameBoard = {
createBoard: function(dimension) {
if (!dimension || isNaN(dimension) || !parseInt(dimension, 10)) {
return false;
} else {
dimension = typeof dimension === 'string' ? parseInt(dimension, 10) : dimension;
var table = document.createElement('table'),
row = document.createElement('tr'),
cell = document.createElement('td'),
rowClone,
cellClone;
var output;
for (var r = 0; r < dimension; r++) {
rowClone = row.cloneNode(true);
table.appendChild(rowClone);
for (var c = 0; c < dimension; c++) {
cellClone = cell.cloneNode(true);
rowClone.appendChild(cellClone);
}
}
document.body.appendChild(table);
output = gameBoard.enumerateBoard(table);
}
return output;
},
enumerateBoard: function(board) {
var rows = board.getElementsByTagName('tr'),
text = document.createTextNode(''),
rowCounter = 1,
size = rows.length,
len,
cells,
real,
odd = false,
control = 0;
for (var r = size - 1; r >= 0; r--) {
cells = rows[r].getElementsByTagName('td');
len = cells.length;
rows[r].className = r % 2 == 0 ? 'even' : 'odd';
odd = ++control % 2 == 0 ? true : false;
size = rows.length;
for (var i = 0; i < len; i++) {
if (odd == true) {
real = --size + rowCounter - i;
} else {
real = rowCounter;
}
cells[i].className = i % 2 == 0 ? 'even' : 'odd';
cells[i].appendChild(text.cloneNode());
cells[i].firstChild.nodeValue = real;
rowCounter++;
}
}
return gameBoard;
}
};
//board.createBoard(10);
document.getElementById("div1").innerHTML = gameBoard.createBoard(10);td {
border-radius: 10px;
width: 55px;
height: 55px;
line-height: 55px;
text-align: center;
border: 0px solid #FFFFFF;
}
table tr:nth-child(odd) td:nth-child(even),
table tr:nth-child(even) td:nth-child(odd) {
background-color: PowderBlue;
}
table tr:nth-child(even) td:nth-child(even),
table tr:nth-child(odd) td:nth-child(odd) {
background-color: SkyBlue;
}
td:hover {
background: LightCyan !important;
cursor: pointer;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body>
<div id="div1"></div>
<script src="JavaScript1.js"></script>
</body>
</html>我需要有关如何解决此问题的帮助。提前致谢。
最佳答案
您只想将游戏板附加到 div#div1，对吗？
- 为
createBoard()函数添加了mount参数 var mount是一个选择器，将被引用为table元素将附加到的元素。- 注释伴随着代码的变化。
- 我在
#div1周围添加了边框，以表明gameBoard已成功附加到#div1
var gameBoard = { //===============▼---▼====[This is can be any selector]
createBoard: function(dimension, mount) {
//==▼------------------------------------▼====[Object mount]
var mount = document.querySelector(mount);
if (!dimension || isNaN(dimension) || !parseInt(dimension, 10)) {
return false;
} else {
dimension = typeof dimension === 'string' ? parseInt(dimension, 10) : dimension;
var table = document.createElement('table'),
row = document.createElement('tr'),
cell = document.createElement('td'),
rowClone,
cellClone;
var output;
for (var r = 0; r < dimension; r++) {
rowClone = row.cloneNode(true);
table.appendChild(rowClone);
for (var c = 0; c < dimension; c++) {
cellClone = cell.cloneNode(true);
rowClone.appendChild(cellClone);
}
}
//▼---------------------▼====[Object table append to Object mount]
mount.appendChild(table);
output = gameBoard.enumerateBoard(table);
}
return output;
},
enumerateBoard: function(board) {
var rows = board.getElementsByTagName('tr'),
text = document.createTextNode(''),
rowCounter = 1,
size = rows.length,
len,
cells,
real,
odd = false,
control = 0;
for (var r = size - 1; r >= 0; r--) {
cells = rows[r].getElementsByTagName('td');
len = cells.length;
rows[r].className = r % 2 == 0 ? 'even' : 'odd';
odd = ++control % 2 == 0 ? true : false;
size = rows.length;
for (var i = 0; i < len; i++) {
if (odd == true) {
real = --size + rowCounter - i;
} else {
real = rowCounter;
}
cells[i].className = i % 2 == 0 ? 'even' : 'odd';
cells[i].appendChild(text.cloneNode());
cells[i].firstChild.nodeValue = real;
rowCounter++;
}
}
return gameBoard;
}
};
/*board.createBoard(10);
[On window load call createBoard with 10 rows and mount it to #div1]
▼----------------------------▼===============================*/
window.onload = (function(e) {
gameBoard.createBoard(10, '#div1');
});td {
border-radius: 10px;
width: 55px;
height: 55px;
line-height: 55px;
text-align: center;
border: 0px solid #FFFFFF;
}
table tr:nth-child(odd) td:nth-child(even),
table tr:nth-child(even) td:nth-child(odd) {
background-color: PowderBlue;
}
table tr:nth-child(even) td:nth-child(even),
table tr:nth-child(odd) td:nth-child(odd) {
background-color: SkyBlue;
}
td:hover {
background: LightCyan !important;
cursor: pointer;
}
#div1 {
border: 3px inset #0FF;
border-radius: 10px;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="div1"></div>
</body>
</html>关于javascript - 如何使用 JavaScript 在 div 中插入对象？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34551934/