用javascript单击计数器

这是我试图创建一个类似的计数器，并显示图像上方的点击次数。然而，如果我只针对类而不循环遍历它，我似乎可以让它工作。但是我需要循环，因为我在其他项目上得到了相同的类

.querySelectorAll

在控制台内返回正确的点击次数，但即使我指定了

.innerHTML

//当我们点击它时，它会显示心脏动画
$（'.like btn'）。在（'click'，function（）上{
$（this.toggleClass（'is-active'）；
});
//点击计数器
var like_button=document.querySelectorAll（'.like btn'），
计数=0；
对于（var i=0；i
。像btn一样{
位置：绝对位置；
顶部：10px；
显示：块；
宽度：60px；
高度：60px；
-webkit盒式包装：结束；
-webkit内容：flex-end；
-ms-flex-pack：结束；
证明内容：柔性端；
-webkit框对齐：居中；
-webkit对齐项目：居中；
-ms-flex-align：居中；
对齐项目：居中；
-webkit自对准：柔性端；
-ms flex项目对齐：结束；
自对准：柔性端；
背景：url（'twitter-heart.png'）；
光标：指针；
背景大小：2900%；
背景重复：无重复；
z指数：5；
}
.处于活动状态{
动画名称：动画；
动画持续时间：.8s；
动画迭代次数：1；
动画定时功能：步骤（28）；
动画填充模式：正向；
}
@关键帧设置动画{
0% {
背景位置：左；
}
50% {
背景位置：右；
}
100% {
背景位置：右；
}
}
我认为这是因为您试图对元素数组而不是元素本身调用onclick和innerHtml。尝试按以下方式更改这些引用：
like_按钮[i].onClick（）
等

例如：

//单击计数器
var like_buttons=document.querySelectorAll（'.like btn'），
计数=0；
对于（var i=0；i

试试看

document.querySelectorAll(".like-btn").forEach(el => el.addEventListener("click", () => {
    count++
    el.innerText = count
    console.log(el)
}))

您不能将事件侦听器添加到节点列表，您需要将单个元素作为目标。
当您显然已经在使用jQuery时，为什么还要在“香草”JavaScript中使用querySelectorAll和循环？只是在壁炉动画中使用了jQuery。我的代码的其余部分没有使用任何库也在尝试学习，我看不出有什么问题尽管你在循环元素的数量，但实际上你没有访问循环中的特定元素，您仍在尝试将单击处理程序添加到querySelectorAll的结果中：
like_按钮。onclick
-这需要是
like_按钮[i]。onclick
作为初学者。谢谢。我的想法很接近，但仍然如此。这是一个很好的教训。
document.querySelectorAll(".like-btn").forEach(el => el.addEventListener("click", () => {
    count++
    el.innerText = count
    console.log(el)
}))