Javascript appendChild不添加元素，並在控制檯中沒有錯誤

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>

也許我一直在尋找這個太長，但我想不出在我的代碼/邏輯缺陷（S）。

我還應該指出，我知道正方形不會在一個漂亮的網格中出現在彼此旁邊 - 我還沒有添加正確的CSS。我想在我的屏幕上至少出現SOMETHING後解決這個問題。

Answer 1

我在這裏看到至少兩個問題。

1. 你永遠呼喚你make_grid功能
2. 你多次追加相同的元素。您需要每次創建一個新的或者只是要移動現有的。

而第三個：

要監聽的事件名稱爲load不onload

Answer 2

你不是實際調用函數，你所做的只是聲明它。 Add：

make_grid(); 

到你的函數的末尾來調用該函數。