Try listening to the parent element and then using the event’s target to figure out the identity of the input. Since the child elements events will bubble up you’ll be able to listen to all children
e.g.
let parentElement = document.querySelector(".triple");
parentElement.addEventListener("click", (e) => {
console.log(e.target.id);
});
You can use the onfocus event
<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>I want to create a dynamic form where I also apply JavaScript to the dynamic elements.
What I want to do right now is figure out which field (stored in array or whatever data structure) in JavaScript has been clicked so that I can apply the script to that particular field.
The HTML looks like this:
<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>This “triple” div is dynamic and I want to create as many “triples” as the user wants, that also means the input fields of inside the “triple” section increase as well.
I’m confused on how to add javascript to one element of the input. For example I have inputs: category, relation and value and the user wanted 2 or more triples then the input ids could look like category2, relation2 and value2 or something similar to that.
let category = document.getElementById("category");
category.addEventListener("keyup", (e) => {
removeElements();
listDown(category, sortedClasses, ".cat-list")
});If I lets say clicked on category2 for instance how do I tell that to my javascript since these fields are completely dynamic.
Summary: The user is adding repeat sections of triples (containing 3 input elements), where the id of each input element is generated dynamically. My script above works for the first triple section only as the ids are fixed, as for successive “triple” section the id of the fields get changed. How do I identify (see which element has been clicked) and get these dynamic ids
You shouldn’t have two elements share the same id. Consider serializing the ids while creating them, such as
Yes @HaoWu I am doing exactly that but how would I know if category_2 has been clicked in my javascript and how do I get all the dynamic elements in my javascript aswell. Right now since I know I have an element named category I add that to my script and check if it has been clicked or not. But if this is dynamic how do i create all the dynamic elements in my script and check if they have been clicked or not
Okay this is very interesting, could you kindly tell me what the e.target.id does ? and how would I get to know which field has been clicked
e.target
Thankyou so much this is a very interesting solution I will try this out