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 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);
});