javascript - 在多个相同 ID 上使用 addEventListener

标签 javascript addeventlistener

我需要为我的转发、喜欢和不喜欢按钮添加一个事件监听器。它们都具有相同的 ID,因此现在只有顶部推文的计数器增加。这是一个学校项目,所以我只能使用原始JS。这是 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 无效。

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

我建议你use classes instead ,它支持具有相同类的多个元素。

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

关于javascript - 在多个相同 ID 上使用 addEventListener,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31753510/

相关文章:

用于 keyup 的 Javascript addEventListener 未注册任何键值

javascript - Google map API V3 - 元素 onClick - 中心 map /打开信息窗口

javascript - 鼠标悬停期间附加的跨度上的单击事件未触发

javascript - 使用 jQuery 克隆表单输入

javascript - 不能将 onChange 与 react-bootstrap ToggleButtonGroup 一起使用

Angular2,HostListener,我如何定位一个元素?我可以根据类(class)定位吗?

javascript - Node.js - 不是函数

javascript - 为多个子组件或简单的父组件添加事件监听器

android - Android 应用上的自定义事件监听器

javascript - forEach 和 addEventListener 方法中 "this"的行为