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

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

--inplace

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));

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

纯js中的棋盘

5 个答案: