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

我在Stackoverflow上查看this question。接受的答案附有小提琴。我试图通过将按钮“ type”更改为按钮标签来稍微调整代码，并提出了这个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);
}

最佳答案

将您的代码包装在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);
}

}

关于javascript - 从输入(“按钮”类型)更改为按钮标签不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46411503/