我三天前在学校开始接触JS,之前有一些C语言基础,所以我认为主要问题在于语法。
我的目标是制作一个国际象棋棋盘,8x8个黑白方块,但我不能让代码显示任何东西。我缺少了什么?
(HTML只有
我三天前在学校开始接触JS,之前有一些C语言基础,所以我认为主要问题在于语法。
我的目标是制作一个国际象棋棋盘,8x8个黑白方块,但我不能让代码显示任何东西。我缺少了什么?
(HTML只有
你的代码中有几个错误,请使用 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";
}
}
if (i % 2 == j % 2) newTd.style.backgroundColor = "white";
else newTd.style.backgroundColor = "black";
newTd.style.width = "25px";
newTd.style.height = "25px";
addElement.innerHTML
是对addElement
变量的innerHTML属性的引用。而addElement
是对函数定义的引用,没有innerHTML
属性。window.onload = addElement;
参见: https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onload
编辑:我发布得太快了,没有像Karan的回答中提到的那样注意到代码中的其他错误。
你好,Jaune,欢迎来到 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;
}
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);
}