javascript - 纯js棋盘

Question

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

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

(html 仅包含脚本 src="./x.js"部分和“正文”部分)

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

}