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

Question

I want to create a simple div element in html with vanilla JS. I am trying to add EventListener to a button to create a div on click , but strange situation happening as i can't figure it out why?

I am trying to create a div under that [div element with container-div class], when i will click the button. But when i clicking it function createDiv can't tale argument for height parameter. why it's happening? Help me please , much appreciated.

This pic for directly calling function before clicking button

In this pic red bordered area is growing after i clicked button several times

I am trying to create a div without fill but ....

 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

You need to add the click to the button

Also you return the div so you can use it for other stuff - see how here:

I would move the insertion to after the creation

 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

When invoking a function by a DOM event, if no argument is provided, the first argument will be the evevnt itself.

This is why in your case, by clicking the button, you get a div with no height. Because the height parameter value isn't '200px' but the event itself. Try logging the height to the console and you will see it. mplungjan solve's the problem nicely in his answer.

Good luck!