How trigger an event individually to different instances of the same id

Question

I have a list and I want to trigger an event individually with the same javascript code without define an id for each. For example, I want when I click each item the inner text changes to the color it says. In other words, I want the code knows where I'm clicking and apply the function to that particular item, and don't want to use id=color1", id=color2", id=color3". Any help appreciated!

<ul>
<li onclick="jsCode" id="color">Red<li>
<li onclick="jsCode" id="color">Blue<li>
<li onclick="jsCode" id="color">Green<li>
</ul>

Ids must be unique. Maybe use a class instead. Or a data attribute. — Andy, May 30 '22 at 01:52

Andy · Answer 1 · 2022-05-30T02:07:04.010

I think the easiest way to do this is to add a data attribute to each list item that references the colour, and then add that colour (defined in the CSS) to the the element's classList.

const list = document.querySelector('ul');
list.addEventListener('click', handleClick, false);

function handleClick(e) {
  if (e.target.matches('li')) {
    const { id } = e.target.dataset;
    e.target.classList.add(id);
  }
}

.red { color: red; }
.blue { color: blue; }
.green { color: green; }
li:hover { cursor: pointer; }

<ul>
  <li data-id="red">Red</li>
  <li data-id="blue">Blue</li>
  <li data-id="green">Green</li>
</ul>

Additional documentation

Or if you don't want to use data attributes pick up the colour from the text content of each list item.

const list = document.querySelector('ul');
list.addEventListener('click', handleClick, false);

function handleClick(e) {
  if (e.target.matches('li')) {
    const { textContent } = e.target;
    const color = textContent.toLowerCase();
    e.target.classList.add(color);
  }
}

.red { color: red; }
.blue { color: blue; }
.green { color: green; }
li:hover { cursor: pointer; }

<ul>
  <li>Red</li>
  <li>Blue</li>
  <li>Green</li>
</ul>

This is exactly what I need. And what happen if I want to trigger not the same element but the bullet? To run an animation for example. — alejorojas2k, May 30 '22 at 02:26
You'd have to use something other than `ul` and `li` as the bullet is part of that list styling. Have the bullet as a separate element. Something like `
&bullet;My Text
`. — Andy, May 30 '22 at 02:29

score -1 · Accepted Answer · answered May 30 '22 at 02:03

Warning: Your problem here is that XHTML standards do not allow multiple elements with the same ID. This is simply not allows in XML, XHTML, or HTML 5. This is not just bad practice, but code which will most likely break in production as your application gets larger and less maintainable.

Solution 1: Use Classes

If you are using the same ID so that you can style the elements the same way, then you should be using classes:

<li class="color" id="red">Red</li>
<li class="color" id="blue">Blue</li>
<li class="color" id="green">Green</li>

Solution 2: Use `querySelectorAll`

Using document.getElementById will target only the first element with the specified ID (reference the warning above).

If you still insist on having multiple elements with the same ID, then there is one solution left (although proceed with caution).

document.querySelectorAll will accept a query selector (similar to CSS selectors) as a parameter and find all elements which match the provided query selector. So document.querySelectorAll('li') will return a NodeList (similar to an array) of <li /> elements. You can use the same function to grab all the elements with id="color":

const colors = Array.from(document.querySelectorAll('#color'));

colors.forEach(listItem => {
    const color = listItem.textContent.toUpperCase();

    listItem.addEventListener('click', () => {
        alert(`You clicked on ${color}`);
    });
});

You can checkout this codepen for a demo: https://codepen.io/virajshah21/pen/gOvvqEj

How trigger an event individually to different instances of the same id

2 Answers2

Solution 1: Use Classes

Solution 2: Use querySelectorAll

Solution 2: Use `querySelectorAll`