Adding a click event to a dynamically created html element using vanilla JS

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>

As you can see from the snippet I made you there is no createDivbtn to add an event listener to — mplungjan
– mplungjan, Commented Nov 10, 2020 at 8:11

mplungjan · Accepted Answer · 2020-11-10 08:41:36Z

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>

edited Nov 10, 2020 at 8:41

answered Nov 10, 2020 at 8:14

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Md. Mahadad Hossain Over a year ago

Ya first i forgot to add that line in my question , as i declared it at top in my editor . But thanks a lot for your help .

Md. Mahadad Hossain Over a year ago

i saw it , thanks for your concern . but i tried to fix this problem by this code earlier. code: {createDivbtn.addEventListener("click", createDiv((h1 = "200px")));} but i failed as after i wrote that code that blue div is there even before i click that button. Can you please explain why it's happening.

mplungjan Over a year ago

You cannot do it that way. The code you paste executes the createDiv when it is reached by the script engine. You could do createDivbtn.addEventListener("click", function() { createDiv("200px")})

yochanan sheinberger · Accepted Answer · 2020-11-10 08:35:41Z

0

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!

answered Nov 10, 2020 at 8:35

yochanan sheinberger

7351 gold badge6 silver badges10 bronze badges

3 Comments

Md. Mahadad Hossain Over a year ago

Thanks a lot yochanan , mplungjan solved my problem and you explained it. I also tried to pass undefined or other value for first argument , but then div with blue border created before i even click that button . Can you please explain that also why that is happening.Here - code: createDivbtn.addEventListener("click", createDiv(h1 ="200px") );

yochanan sheinberger Over a year ago

That's because you invoke the function while you are assigning it to the event. The parentheses you added invoke it, that's what they are supposed to do.

Md. Mahadad Hossain Over a year ago

Nice , now i think i should first learn more about eventlistener and dom management . Thank you

Collectives™ on Stack Overflow

Adding a click event to a dynamically created html element using vanilla JS

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related