Question: How do I make my eventListeners on buttons of clones active?
Explanation: I am building a plugin using HTML,CSS and Vanilla Javascript (required, no jquery or other libraries). One of the features is to have multiple addresses for a program of an Organization. Also, an organization can have multiple programs.
Visual:
(simple) Org > Program [Address]
(complex) Org > Program [Address, Address1], Program1 [Address2, Address3]
The button for creating a new address is in the address form itself because it needs to append to the same program it is in.
The problem is I am losing the "add address" button's function on the clones. I know I need to update the Javascript's addEventListeners for the new HTML buttons. I know it is literally just calling the same function over again, but I don't want to create a loop and I feel like that is a bad practice.
Sorry if this is a novice question, I don't have a sr to help me
Code::
var addProgramButton = document.getElementById("cloneAddress")
for (var i = 0; i < addProgramButton.length; i++){
//code that clones and appends
// Right now I am just calling the same thing again
// var addProgramButton = document.getElementById("clone...)
}
*Thank you for those who contributed. What Is working
// The initial Listener
var cloner2 =
document.getElementsByClassName('cloneProgramDetailsButton')
for (var i = 0; i < cloner2.length; i++){
cloner2[i].addEventListener('click', function(e){
addAddress(e)
})
}
//Function for cloning
function addAddress(event){
console.log("did this trigger it", event)
var boxes = document.getElementById("cloneProgramDetails");
var clone = boxes.cloneNode(true);
var inputElements = clone.querySelectorAll("input");
for(var i = 0; i < inputElements.length; i++){
inputElements[i].value = '';
var nameBuilding = inputElements[i].name.split('_')
if(nameBuilding.length > 1){
inputElements[i].name = nameBuilding[0] +
myTicker + "_" + nameBuilding[1];
} else {
inputElements[i].name = nameBuilding[0] +
myTicker
}
}
event.originalTarget.parentNode.parentNode.parentNode.appendChild(clone)
var cloner2 = document.getElementsByClassName('cloneProgramDetailsButton')
for (var i = 0; i < cloner2.length; i++){
cloner2[i].addEventListener('click', function(e){
addAddress(e)
})
}
}