使用 vanilla JS 向动态创建的 html 元素添加点击事件

Question

我想用 vanilla JS 在 html 中创建一个简单的 div 元素。 我正在尝试将 EventListener 添加到按钮以在单击时创建一个 div，但是发生了奇怪的情况，因为我不知道为什么？

当我单击按钮时，我正在尝试在该 [div 元素与容器 div 类] 下创建一个 div。 但是当我点击它时，函数 createDiv 不能为 height 参数提供参数。 为什么会这样？ 请帮助我，非常感谢。

此图用于在单击按钮之前直接调用函数

在这张图片中，我多次点击按钮后，红色边框区域正在增长

我正在尝试创建一个没有填充的 div 但是....

 function createDiv( height = "200px", width = "200px", border = "solid 1px red" ) { const div = document.createElement("div"); div.style.height = height; div.style.width = width; div.style.border = border; document.getElementsByClassName("container-div")[0].appendChild(div); return div; } const createDivbtn = document.getElementById("createDiv"); createDiv(); createDiv(undefined, undefined, "solid 5px blue"); createDivbtn.addEventListener("click", createDiv);

 <div class="row"> <div class="col-6"> <button id="createDiv" class="btn btn-outline-black1"> Create Div </button> </div> <div class="col-6 container-div"></div> </div>

Answer 1

您需要将点击添加到按钮

此外，您还可以返回 div，以便您可以将其用于其他内容 - 请参阅此处：

我会将插入移动到创建之后

 function createDiv( height = "200px", width = "200px", border = "solid 1px red" ) { const div = document.createElement("div"); div.style.height = height; div.style.width = width; div.style.border = border; return div; } document.getElementById("createDiv").addEventListener("click",function() { const createdDiv1 = createDiv(undefined, undefined, "solid 5px blue"); createdDiv1.textContent = "1. created"; document.getElementsByClassName("container-div")[0].appendChild(createdDiv1); const createdDiv2= createDiv(undefined, "300px", "solid 5px green"); createdDiv2textContent = "2 created"; document.getElementsByClassName("container-div")[0].appendChild(createdDiv2); })

 <div class="row"> <div class="col-6"> <button id="createDiv" class="btn btn-outline-black1"> Create Div </button> </div> <div class="col-6 container-div"></div> </div>

Answer 2

当通过 DOM 事件调用函数时，如果没有提供参数，第一个参数将是事件本身。

这就是为什么在您的情况下，通过单击按钮，您会得到一个没有高度的 div。 因为高度参数值不是'200px'而是事件本身。 尝试将高度记录到控制台，您将看到它。 mplungjan 在他的回答中很好地解决了这个问题。

祝你好运！