Have addEventListener on multiple of the same IDs

Question

I need to add an event listener to my retweet, like and dislike buttons. They all have the same ID so right now only the top tweet has the counter increase. This is a project for school so I can only use raw JS. Here is a link to the fiddle:

https://jsfiddle.net/1sc7g5ko/

And here is what my JS looks like

var retweets;
retweets = 0;

var likes;
likes = 0;

var dislikes;
dislikes = 0;

document.getElementById("retweet").addEventListener("click", retweetClicked);

function retweetClicked(){
    document.getElementById("retweet").innerHTML = retweets += 1;
};

document.getElementById("likes").addEventListener("click", likeClicked);

function likeClicked(){
    document.getElementById("likes").innerHTML = likes += 1;
};

document.getElementById("dislikes").addEventListener("click", dislikeClicked);

function dislikeClicked(){
    document.getElementById("dislikes").innerHTML = dislikes += 1;
};

There may be only single one id in a document. It isn't two, nor three, but just one. You have to rearrange your HTML so that there is only single one occurrence of the id="likes". Otherwise it is not a valid HTML. — cezar, Jul 31 '15 at 19:15
Use a class if you want to have multiple items of the same type. — Barmar, Jul 31 '15 at 19:15

Maximillian Laumeister · Accepted Answer · 2015-07-31T19:21:32.140

6

Element IDs should be unique within your entire document. If you have more than one element with the same ID, your HTML is invalid.

Source: Can multiple different HTML elements have the same ID if they're different types?

I suggest you use classes instead, which support having multiple elements with the same class.

Then you can use document.getElementsByClassName("name") to get a list of all elements with that class.

edited Jul 31 '15 at 19:21

answered Jul 31 '15 at 19:14

Maximillian Laumeister

19,884
8
59
78

Short and accurate. The id must not be repeated. +1 – cezar Jul 31 '15 at 19:17
@torazaburo Thanks, TIL. Answer updated. And [docs, for anyone else who might curious what a NodeList is](https://developer.mozilla.org/en-US/docs/Web/API/NodeList#Why_is_NodeList_not_an_Array). – Maximillian Laumeister Jul 31 '15 at 19:21

score 2 · Answer 2 · answered May 16 '22 at 23:37

What @Maxmillian Laumeister said is correct, but there are other solutions and/or workarounds. For example, let's say you have three <BUTTON> elements with the ID of edit. How you would go about adding event listeners to all of these elements is as such:

First we would grab all of the elements using querySelectorAll
Then, we would loop through with them using forEach
Inside/Using this forEach loop, we would then add the event listeners.

Implementation of this process is below. Feel free to view the demo of this on JSFiddle.

https://jsfiddle.net/n1b2u8cm/

document.querySelectorAll("#edit").forEach((e) => {
   e.addEventListener("click", () => {
      document.body.style.background = "red";
      setTimeout(() => {
         document.body.style.background = "blue";
      }, 300);
   });
});

Thanks you're a life saver! I was actually looping in Express ejs to display my list items and unfortunately I had to use same ids for them. — emmy-chwan, Oct 19 '22 at 16:06
This is the thing in coding that sometimes we are trying a wired methods where the simple loop is the best way to go! You have saved me a lot of time @Joe! Thanks so much! — Maryando, Feb 16 '23 at 16:24

Have addEventListener on multiple of the same IDs

2 Answers2

Linked

Related