'How to pass parameters into an eventListener
I need to read the values from inputs that I'm creating dynamically on the DOM.
When I click submit I need to obtain all the inputs, I do it with an event to a querySelectorAll but I need this last one to be outside the evenListener click because otherwise each time I press "submit" I get all the inputs again and repeat everything in my instance of object, where every input goes.
How can I get all the inputs information just once and not adding more repeat instances of the object in each submit?
let containerTasks = [];
const btnAddTask = document.getElementById("button-addon2");
const submitBtn = document.getElementById("btn__submitList");
class Tasks {
constructor(name, index) {
this.name = name;
this.index = index;
}
}
const myForm = document.createElement("form")
const myInputForms = myForm.setAttribute('class', 'my-InputForms');
mainTaskList.append(myForm)
btnAddTask.addEventListener("click", () => {
inputSlot = document.createElement('input');
inputSlot.setAttribute('type', 'text');
inputSlot.setAttribute('placeholder', 'Ingresa tu tarea');
inputSlot.setAttribute('class', 'input-forms');
myForm.appendChild(inputSlot);
let inputSubmit = document.createElement('input');
inputSubmit.setAttribute('type', 'submit');
inputSubmit.setAttribute('class', 'sending');
myForm.appendChild(inputSubmit);
})
const myInput = document.querySelectorAll('.input-forms');
myForm.addEventListener("submit", (e) => {
e.preventDefault();
myInput.forEach((myTask, index) => {
containerTasks.push(new Tasks(myTask.value, `tarea ${index}`));
})
console.log(containerTasks)
});
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
