Why don't event listeners work with my dynamically created buttons? (Javascript)

Question

I am having some trouble adding a 'click' event listener to my dynamically created buttons. The original, hardcoded html button has no problem appending the dynamic elements multiple times, but the dynamic buttons inside the new elements don't get the event listener passed to them. When I click on them, nothing happens.

The dynamically created buttons do seem to work because I can change them to submit buttons and reload the page, but still no event listener.

const title = document.querySelector(".tracker-title");
let btns = document.querySelectorAll(".add-btn");
btns.forEach(function (i) {
  i.addEventListener("click", function (e) {
    // e.preventDefault();
    count += 1;
    const element = document.createElement("div");
    element.classList.add("form-add-btn");
    element.classList.add("form-layout");
    const label = document.createElement("label");
    label.setAttribute("for", `${count}`);
    label.innerText = "Title";
    const input = document.createElement("input");
    input.setAttribute("placeholder", `ex. ${exampleArray[count - 3]}`);
    input.setAttribute("id", `${count}`);
    input.setAttribute("type", "text");
    const button = document.createElement("button");
    button.classList.add("add-btn");
    button.innerText = "Add";
    button.setAttribute("type", "button");

    title.appendChild(element);
    element.appendChild(label);
    element.appendChild(input);
    element.appendChild(button);

    btns = document.querySelectorAll(".add-btn");
  });
});

This is the html that is generated when I click the hardcoded button twice.

<div class="tracker-title">
  <div class="form-add-btn form-layout">
    <label for="3">Goal Title</label>
    <input type="text" placeholder="ex. Meditation" id="3">
    <button type="button" class="add-btn">ADD</button>
  </div>
  <div class="form-add-btn form-layout">
    <label for="4">Title</label>
    <input placeholder="ex. Exercise" id="4" type="text">
    <button class="add-btn" type="button">Add</button>
  </div>
  <div class="form-add-btn form-layout">
    <label for="5">Title</label>
    <input placeholder="ex. Studying" id="5" type="text">
    <button class="add-btn" type="button">Add</button>
  </div>
</div>

The code you posted adds an event listener for all the buttons it finds *when it runs*. Buttons added subsequently will not be affected. — Pointy, Jun 17 '22 at 16:10
Use `button.addEventListener()` to add an event listener to the new buttons you create. — Barmar, Jun 17 '22 at 16:17
Or use event delegation. See https://stackoverflow.com/questions/23508221/vanilla-javascript-event-delegation — Barmar, Jun 17 '22 at 16:18

score 0 · Answer 1 · answered Jun 17 '22 at 16:32

The dynamic buttons have no event listener applied to them. The loop adds the event-listener to all buttons in the list at its execution time (One time after creating the array) Dynamically created buttons aren't in the array at this time and won't get the event listener applied. If you want the same event listener for all buttons you can create the event-listener as a function and parse it into the addEventListener function which also has to be called after creating a new button. My version:

const title = document.querySelector(".tracker-title");
let btns = document.querySelectorAll(".add-btn");
//Event listener function
function eventlistener(e) {
   //e.preventDefault();
   count += 1;
   const element = document.createElement("div");
   element.classList.add("form-add-btn");
   element.classList.add("form-layout");
   const label = document.createElement("label");
   label.setAttribute("for", `${count}`);
   label.innerText = "Title";
   const input = document.createElement("input");
   input.setAttribute("placeholder", `ex.`);
   input.setAttribute("id", `${count}`);
   input.setAttribute("type", "text");
   const button = document.createElement("button");
   button.classList.add("add-btn");
   button.innerText = "Add";
   button.setAttribute("type", "button");
   //Add eventlistener function to the new button
   button.addEventListener("click", eventlistener);
   title.appendChild(element);
   element.appendChild(label);
   element.appendChild(input);
   element.appendChild(button);
   btns = document.querySelectorAll(".add-btn");
}
btns.forEach(function (i) {
    //Add eventlistener function to exeisting buttons
    i.addEventListener("click", eventlistener);
});

Why don't event listeners work with my dynamically created buttons? (Javascript)

1 Answers1