用纯JS实现的棋盘

Question

我三天前在学校开始接触JS，之前有一些C语言基础，所以我认为主要问题在于语法。

我的目标是制作一个国际象棋棋盘，8x8个黑白方块，但我不能让代码显示任何东西。我缺少了什么？

（HTML只有

- Jaune

---

小技巧 - 按F12键，您就能够在控制台中看到任何错误。 - markmoxx

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";
  }

}

- Karan

Answer 2

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

if (i % 2 == j % 2) newTd.style.backgroundColor = "white";

else newTd.style.backgroundColor = "black";

newTd.style.width = "25px";

newTd.style.height = "25px";

请看这个fiddle：http://jsfiddle.net/vdquLn65/2/ 关于你当前的代码，你可以使用getElementsByClassName和getElementsByTagName，并迭代它们返回的元素来完成你想要的操作。

- Alex G

---

是的，我在编写测试时也考虑过这个问题，但我选择了当前的组织方式，所以CSS都放在同一个位置，在主JS部分之后。这可能会使解决我的问题变得更容易，甚至可以解决它。感谢您的建议。 - Jaune

Answer 3

您当前的代码中，addElement.innerHTML是对addElement变量的innerHTML属性的引用。而addElement是对函数定义的引用，没有innerHTML属性。

尝试将第一行更改为以下内容：

window.onload = addElement;

参见: https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onload

编辑：我发布得太快了，没有像Karan的回答中提到的那样注意到代码中的其他错误。

- markmoxx

---

完全没有解释，他很好奇自己做错了什么，解决方案可能有用，但似乎不是首要问题/必要性。 - Icepickle

虽然它并没有解决我的问题，但我正在学习，所以我很高兴能更好地理解一些东西，谢谢。 - Jaune

Answer 4

你好，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;
}

- HMR

---

你好HMR，感谢热情的欢迎。我很乐意接受你的帮助提议，但是由于我对语法还不够熟悉，目前还没有有趣的问题可以问你关于你的代码。再次感谢。 - Jaune

@Jaune 以下书籍可以帮助你了解语法，这里有一些方便的数组函数。 - HMR

虽然这肯定是最好的方法，但我想指出的是，问题是要使用JavaScript单独生成棋盘。 - Abion47

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

- Abion47

---

我知道我知道，但是这个练习只涉及JS，我甚至没有一个.CSS或者<style>所以它有点让我头晕: p另一位学生根据您的建议确实使用了黑色表格上的白色td，效果不错！ - Jaune