在多个相同的ID上具有addEventListener [英] Have addEventListener on multiple of the same IDs

问题描述

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

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/

这是我的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;
};

推荐答案

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

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

来源:可以多个不同的HTML元素(如果它们是不同的类型)具有相同的ID?

我建议您改为使用类，该类支持在同一个类中包含多个元素

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

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

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

这篇关于在多个相同的ID上具有addEventListener的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！