Chessboard in pure js

Question

我3天前在学校开始学习js，之前我有一些C基础知识，所以这里的主要问题是语法(我认为(。

目标是制作一个8x8黑白方块的棋盘，但我无法获得显示任何内容的代码。我错过了什么？

(html只有脚本src="./x.js"部分和"body"部分(

document.body.onload = addElement.innerHTML;
function addElement() {
var newTable = document.createElement("table");
for (var i = 1; i < 9; i++) {
var newTr = document.createElement('tr');
for (var j = 1; j < 9; j++) {
var newTd = document.createElement('td');
if (i % 2 == j % 2) {
newTd.className = "white";
} else {
newTd.className = "black";
}
newTr.appendChild(newTd);
}
newTable.appendChild(newTr);
}
document.body.appendChild(newTable);
document.getElementByClass("black").style.backgroundColor = "black";
document.getElementByClass("white").style.backgroundColor = "white";
document.getElementByTag("newTd").style.width = "25px";
document.getElementByTag("newTd").style.height = "25px";
}

Answer 1

您的代码中很少有错误使用getElementsByClassName而不是getElementByClass，使用getElementsByTagName而不是getElementByTag。

此外，您还需要在每个选定的元素上循环。

使用window.onload = addElement;，也可以在函数声明完成后简单地调用addElement();。

window.onload = addElement;
function addElement() {
var newTable = document.createElement("table");
for (var i = 1; i < 9; i++) {
var newTr = document.createElement('tr');
for (var j = 1; j < 9; j++) {
var newTd = document.createElement('td');
if (i % 2 == j % 2) {
newTd.className = "white";
} else {
newTd.className = "black";
}
newTr.appendChild(newTd);
}
newTable.appendChild(newTr);
}
document.body.appendChild(newTable);
var i = 0;
for (i = 0; i < document.getElementsByClassName("black").length; i++) {
document.getElementsByClassName("black")[i].style.backgroundColor = "black";
}
for (i = 0; i < document.getElementsByClassName("white").length; i++) {
document.getElementsByClassName("white")[i].style.backgroundColor = "white";
}
for (i = 0; i < document.getElementsByTagName("td").length; i++) {
document.getElementsByTagName("td")[i].style.width = "25px";
document.getElementsByTagName("td")[i].style.height = "25px";
}
}

Answer 2

一种更简单的方法是在创建每个元素时添加属性，而不是在创建之后添加。像这样：

if (i % 2 == j % 2) newTd.style.backgroundColor = "white";
else newTd.style.backgroundColor = "black";
newTd.style.width = "25px";
newTd.style.height = "25px";

看看这把小提琴：http://jsfiddle.net/vdquLn65/2/

关于您当前的代码，您可以使用getElementsByClassName和getElementsByTagName，并对它们返回的元素进行迭代，以执行您想要的操作。

Answer 3

正如您目前所拥有的，addElement.innerHTML是对addElement变量的innerHTML属性的引用。addElement是对函数定义的引用，不具有innerHTML属性。

尝试将您的第一行更改为：

window.onload = addElement;

请参阅：https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

编辑：我发布这个有点太快了，没有发现Karan回答中提到的代码中的其他错误。

Answer 4

大家好，欢迎来到Stack Overflow。我添加了一个答案，它将首先创建数据，然后使用函数将该数据映射到元素。如果你有任何问题，请告诉我。

const field = ([x, y, color]) => {
const td = document.createElement('td');
td.setAttribute('data-x', x);
td.setAttribute('data-y', y);
td.className = color;
td.innerHtml = `${x}-${y}`;
return td;
};
const row = (row) => {
const tr = document.createElement('tr');
row.forEach((fieldItem) =>
tr.appendChild(field(fieldItem)),
);
return tr;
};
const table = (tableData) => {
const table = document.createElement('table');
tableData.forEach((rowData) =>
table.appendChild(row(rowData)),
);
return table;
};
const tableData = Array.from(Array(8).keys()).map((x) =>
Array.from(Array(8).keys()).map((y) => [
x,
y,
(x + y) % 2 ? 'black' : 'white',
]),
);
document.body.appendChild(table(tableData));

.black {
width:10px;
height:10px;
background-color: black;
}
.white {
width:10px;
height:10px;
background-color: white;
}
table {
border: 1px solid black;
}

Answer 5

作为一种替代方法，可以考虑将表本身着色为黑色，只将相应的瓦片着色为白色：

window.onload = addElement;
function addElement() {
var tbl = document.createElement('table');
tbl.style.backgroundColor = 'black';
for (var i = 1; i < 9; i++) {
var tr = document.createElement('tr');
for (var j = 1; j < 9; j++) {
var td = document.createElement('td');
td.style.width = '25px';
td.style.height = '25px';
if (i % 2 == j % 2) {
td.style.backgroundColor = 'white';
} 
tr.appendChild(td);
}
tbl.appendChild(tr);
}
document.body.appendChild(tbl);
}

而且，正如Alex G所说，在创建元素时进行造型要简单得多，而不是稍后尝试对其进行迭代。我理解将代码的逻辑和样式部分分离的想法，但在这种情况下，这并不值得增加精力和复杂性，而且无论如何都有更好的方法。

此外，如果您想将样式与逻辑分离，那就是CSS文件的用途。：P