Quiero crear un formulario dinámico donde también aplico JavaScript a los elementos dinámicos.
Lo que quiero hacer ahora es averiguar en qué campo (almacenado en una matriz o en cualquier estructura de datos) en JavaScript se ha hecho clic para poder aplicar el script a ese campo en particular.
El HTML se ve así:
<div class="triple"> <div class="sub-triple"> <label>Category</label> <input type="text" name="category" id="category" placeholder="Classes/Instances" required/> <ul class="cat-list"></ul> </div> <div class="sub-triple"> <label>Relation</label> <input type="text" name="relation" id="relation" placeholder="Properties" required/> <ul class="rel-list"></ul> </div> <div class="sub-triple"> <label>Value</label> <input type="text" name="value" id="value" placeholder="Classes/Instances" required/> <ul class="val-list"></ul> </div> </div>Este div "triple" es dinámico y quiero crear tantos "triples" como el usuario quiera, eso también significa que los campos de entrada dentro de la sección "triple" también aumentan.
Estoy confundido sobre cómo agregar javascript a un elemento de la entrada. Por ejemplo, tengo entradas: categoría, relación y valor y el usuario quería 2 o más triples, entonces los identificadores de entrada podrían verse como categoría2, relación2 y valor2 o algo similar.
let category = document.getElementById("category"); category.addEventListener("keyup", (e) => { removeElements(); listDown(category, sortedClasses, ".cat-list") });Si digo que hice clic en la categoría 2, por ejemplo, ¿cómo le digo eso a mi javascript ya que estos campos son completamente dinámicos?
Resumen: el usuario está agregando secciones repetidas de triples (que contienen 3 elementos de entrada), donde la identificación de cada elemento de entrada se genera dinámicamente. Mi secuencia de comandos anterior funciona para la primera sección triple solo cuando las identificaciones son fijas, ya que para la sección "triple" sucesiva, la identificación de los campos cambia. ¿Cómo me identifico (veo en qué elemento se ha hecho clic) y obtengo estos ID dinámicos?
Intente escuchar el elemento principal y luego use el objetivo del evento para averiguar la identidad de la entrada. Dado que los eventos de elementos secundarios aparecerán, podrá escuchar a todos los niños
p.ej
let parentElement = document.querySelector(".triple"); parentElement.addEventListener("click", (e) => { console.log(e.target.id); });Puedes usar el evento onfocus
<div class="triple"> <div class="sub-triple"> <label>Category</label> <input type="text" name="category" id="category" placeholder="Classes/Instances" onfocus="onFocusCategoryInput()" required/> <ul class="cat-list"></ul> </div> <div class="sub-triple"> <label>Relation</label> <input type="text" name="relation" id="relation" placeholder="Properties" onfocus="onFocusRelationInput()" required/> <ul class="rel-list"></ul> </div> <div class="sub-triple"> <label>Value</label> <input type="text" name="value" id="value" placeholder="Classes/Instances" onfocus="onFocusValueInput()" required/> <ul class="val-list"></ul> </div> </div>