纯js的棋盘

Question

我3天前在学校开始,我之前有一些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并迭代它们返回的元素以执行您想要的操作.