从输入（类型“按钮”）更改为按钮标签不起作用

Question

我在 Stackoverflow 上查看 this question。接受的答案附有一个小提琴。我试图通过将按钮“类型”更改为按钮标签来稍微调整代码，并想出了这个 Fiddle。但我不知道为什么这不起作用。谁能指出我哪里出错了？

原小提琴：https://jsfiddle.net/hQKy9/

HTML

<div id="container"></div>
<input type="button" onclick="addDiv();" value="Click here to add div"/>

脚本

function addDiv() {
    var objTo = document.getElementById('container');
    var divtest = document.createElement("div");
    divtest.innerHTML = "new div";
    objTo.appendChild(divtest);
}

我的版本：https://jsfiddle.net/Miraj50/gdjpbewx/1/

HTML

<button class="but">hello</button>
<div id="container"></div>

脚本

var adddiv = document.querySelector('.but');
adddiv.addEventListener('click',addDiv);

function addDiv() {
    var objTo = document.getElementById('container');
    var divtest = document.createElement("div");
    divtest.innerHTML = "new div";
    objTo.appendChild(divtest);
}

Answer 1

将代码包装在 window.onload 中，如下所示：

这将允许加载项目，之后您可以绑定事件。

window.onload = function() {

var adddiv = document.querySelector('.but');
adddiv.addEventListener('click',addDiv);

function addDiv() {
        var objTo = document.getElementById('container');
        var divtest = document.createElement("div");
        divtest.innerHTML = "new div";
        objTo.appendChild(divtest);
}

}