Handling a lot of IDs in HTML
I am new to web design and have a problem. I really don't know how to solve in the most eloquent way. I have 7 days of the week, each with two dropdown menus. The dropdown menu has 24 options, 1 for each hour of the day. This means 336 possible choices that the user can click in total.
I need to assign a function to each of these 336 items that will update the text in the corresponding field that the dropdown exited from.
I know how to do what I am trying to achieve, but I am not sure how to do it "correctly". I could write my own function that updates the text based on what you clicked on. I could then go through and manually assign a unique ID to each of my 336 items, and then write a function that goes through and assigns my first function to all of them. Though that would mean manually assigning 336 unique IDs in my HTML. Is there something wrong with that? is there a better way?
I feel like I am missing something very obvious that would make this much easier - perhaps I am taking the completely wrong approach?
source to share
You shouldn't use IDs and only use one event for all elements.
There is a concept called event delegation where you attach an event to the parent node and it will handle that event for all child nodes. As events bubble up in javascript, any event will eventually hit the parent node and fire it. When this happens, you can check the original target of the event and check if it is one of the classes you care about.
Here's an example: https://davidwalsh.name/event-delegate
Many libraries offer their own support for this, but it's actually pretty easy to do.
source to share
Assign one event handler to onclick
all 336 of your items. The Event parameter that is passed to the event handler is the property target
that is the element on which the event was fired.
Then find the parent of that element (just node.parentElement
) and do processing on it.
PS you don't need to have a unique id of an element to assign an event handler to it.
Try:
document.querySelectorAll('.el').forEach(function(t) {
t.onclick = func;
});
source to share
Try using the < this
" keyword rather than assigning IDs manually.
So instead, document.getElementById(id)
you can usethis
for example, instead of
Html
<element id="myid" onClick="changer(myid);"> </element>
Js
function changer(id)
{
document.getElementById(id).innerHTML="changed";
}
You may try
Html
<element onClick="changer(this);"> </element>
Js
function changer(obj)
{
obj.innerHTML="changed";
}
source to share
There are other functions that can be used to move the DOM. Check out the Element documentation .
There are many ways to achieve what you want here, but I would do it by assigning a generic class, for example day
, to all your day parameters, and another class, for example start-time
, end-time
for the time parameters. Then I will bind a function to all the items returneddocument.getElementsByClassName('day')
source to share