javascript - 从输入(类型 "button")更改为按钮标签不起作用

Question

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

原始 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 中，如下所示:

这将允许加载项目，然后您可以绑定(bind)事件。

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

}