在多个相同的 ID 上有 addEventListener

Question

我需要在我的转发、喜欢和不喜欢按钮中添加一个事件侦听器。它们都具有相同的 ID，因此现在只有顶部推文的计数器增加。这是一个学校项目，所以我只能使用原始 JS。这是小提琴的链接：

https://jsfiddle.net/1sc7g5ko/

这是我的 JS 的样子

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;
};

Answer 1

元素 ID 在整个文档中应该是唯一的。如果您有多个具有相同 ID 的元素，则您的 HTML 无效。

来源：如果多个不同的 HTML 元素类型不同，它们是否可以具有相同的 ID？

我建议您改用 classes，它支持具有相同类的多个元素。

然后您可以使用document.getElementsByClassName("name")该类来获取所有元素的列表。