Question

我正在尝试使用javascript创建一个16X16方格。当我试图使用开发工具来解决这个问题时 - 控制台中没有错误，但是我想要追加的div是丢失的。这是相关的代码片段：

window.addEventListener("onload", function () {

  var square = document.createElement("div")
  square.className = "square"
  var grid = document.getElementById("grid")

  var make_grid = function(){
    var line = 0;
    while (line < 16){
      for (var i = 0; i < 16; i++){
        grid.appendChild(square)
      }
      line ++;
    }
  }

});

.square{
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}

<div class="container">
  <div id="grid">
  </div>
</div>

也许我一直在看这个太久了，但我无法弄清楚我的代码/逻辑中的缺陷。

我还应该指出，我知道正方形现在不会在一个漂亮的网格中彼此相邻 - 我还没有添加适当的css。我想在SOMETHING至少出现在我的屏幕上之后解决这个问题。

Answer 1

我在这里至少看到两个问题。

您永远不会调用make_grid函数
您多次附加相同的元素。你需要每次创建一个新的，或者只是移动现有的。

还有第三个：

您要收听的事件名称为load而不是onload

Answer 2

你实际上并没有调用这个函数，你所做的只是声明它。添加：

make_grid();

在函数结束时调用函数。

Javascript appendChild不会在控制台中附加元素和错误

2 个答案: