Javascript 将onclick=call_locker（）事件附加到CSS类

我正在尝试在我的WP站点上实现一个内容锁定器。我通常会在触发弹出窗口的元素上添加HTML代码

onclick=“call\u locker（）”

。但是，由于我用于构建站点的插件，我无法直接访问HTML

这是我要将

call\u locker（）函数连接到的按钮元素。

函数：

我的意图是通过

.onclick

触发事件将

call\u locker（）

函数附加到整个

.fl按钮

类。这样，我就可以在我创建的任何其他

.fl按钮

或页面上全局使用它

这是我想出的代码：

（函数（）{
document.getElementsByClassName（“fl按钮”）.onclick=function（）{
调用_locker（）；
};
})();

但是，当我单击按钮时，什么也没有发生：-(

我不是java方面的专家，所以我只能希望我的语法是正确的，我在文章中使用的术语也是正确的

---

提前感谢您的帮助！

GetElementsByCassName

返回一个类似数组的对象。您需要迭代该对象，并为每个锚标记添加

单击事件侦听器


返回具有所有给定类名的所有子元素的类似数组的对象

您可以使用
Array.prototype.forEach
对集合进行迭代，但在必须将其转换为数组之前，可以通过调用
[].slice.call（HTMLCollection）
来完成

这里有一个例子


var flBtns=document.getElementsByClassName（“fl按钮”）；
[].slice.call（flBtns）.forEach（函数（btn）{
btn.addEventListener（'click'，函数（e）{
e、 预防默认值（）；
console.log（如target）；
//在这里调用您的储物柜功能。
//呼叫_locker（）
})
})

您不必是java专家就可以编写好JS（它们是不同的语言）…查看jQuery的委派事件，或者找到手动委派模式的tut。简而言之，您绑定到根目录并传递一个css选择器，然后过滤引发的事件，根据需要将它们分配到特定的标记。
…me（“fl按钮”）[0].onclick
getElementsByClassName返回几个html对象，您必须迭代这些对象并将事件侦听器分配给impler:
document.querySelector（“a.fl-button”）。onclick=call_locker；
它们都不起作用。在第一个解决方案中，我得到一个类型错误：document.getElementsByClassName（…）[0]未定义。页面上只有一个此类元素。@Pranav C Balan