Javascript onclick不起作用

我试图在用户单击时触发一个函数，但它不起作用

脚本位于正文的最底部：

表中有元素

单击这样的图像不做任何事情都不会登录到控制台。你知道为什么吗？

如文档所述，返回一个数组

使用：

<script>

    document.getElementsByClassName('gallery_image').onclick = function (event) {
        console.log('click')
        event = event || window.event;
        var target = event.target || event.srcElement,
            link = target.src ? target.parentNode : target,
            options = {index: link, event: event},
            links = this.parentNode.getElementsByTagName('a');
        blueimp.Gallery(links, options);
    };

</script>

如果它们是多个元素，则使用forEach

由于该方法的返回类似于数组，但不是数组的实例，因此下面是对其进行循环的方式：

const matches=document.getElementsByClassName'example'； Array.frommatches.forEachx=>{ x、 style.backgroundColor='红色'； }; .举例{ 高度：10px； 宽度：10px； 边缘顶部：5px； }

---

这是因为getElementsByClassName总是返回一个数组 因此，要访问该数组对象，必须使用如下语法

<img class="gallery_image" src="...IMG_20170907_192537_A1rqcbg.jpg.230x200_q85_crop.jpg" alt="">

这里0是document.getElementsByClassName'gallery\u image'返回的数组元素

在dom就绪后始终执行此类型的函数

请在组合中使用：

如果要选择一个特定元素，请使用document.querySelector，因为它返回对节点的引用，而不是节点列表：

document.getElementsByClassName('gallery_image')[0].onclick = function(){
//your function goes here
}

如注释中所述，您需要确保在建立事件侦听器时DOM已准备就绪。您需要为此添加适当的事件侦听器：

document.querySelectorAll('.gallery_image').forEach(element => element.addEventListener(galleryImageClick));

function galleryImageClick(event) {
  console.log(click);
  // do the rest
}

希望能有帮助

---

另外，请检查原因。干杯

有一种更简单、更有效的方法来处理多个节点的单击事件，称为：

查找需要侦听单击事件的元素组的父元素

将单击事件注册到该父元素。现在，无论何时单击子元素，父元素都会听到该事件，然后调用回调函数。id、.classes、.names对于查找单击的节点不是必需的，因为注册到事件允许它使用事件对象属性

我注意到您可能不知道诸如、或等方法的返回。这些属性和方法返回一个类似数组的对象，称为或。要正确处理这种类型的数据结构，需要通过数组方法或for循环对每个项进行循环

第一个函数侦听图像上的单击事件，然后将其放大或缩小。第二部分将所有图像收集到节点列表中，然后为其url分配一个索引号

演示 //引用父节点 var gallery=document.getElementById'gallery'； //将父项注册到单击事件 gallery.onclick=zoomImg； //Callbak函数 函数缩放{ //如果单击的元素是IMG标记 如果e.target.tagName===IMG{ //添加/删除.zoom类 e、 target.classList.toggle'zoom'； } 返回false； } //将所有.image类收集到节点列表中 var images=document.queryselectoral.image'； /*通过forEach方法循环NodeList ||在每个循环中，为每个图像的src添加一个索引号 */ images.forEachfunctionimg，idx{ img.src=`http://via.placeholder.com/50?text=${idx+1}`； }; .形象{ 变换：scale1； 过渡：放松； } .zoom{ 变换：scale2； 过渡：放松； }

---

我想多姆已经准备好了。不，所有这些元素都在第一个响应中。document.getElementsByClassName'gallery\u image'返回一个数组，您需要迭代并向每个项添加侦听器。@zero298它返回的是HTMLCollection而不是arrayIt返回的数组类似于HTMLCollection@Luca是绝对正确的，两者之间的区别很重要。什么是数组。像什么？@Luca我写了太多的js:D打字错误

document.querySelectorAll('.gallery_image').forEach(element => element.addEventListener(galleryImageClick));

function galleryImageClick(event) {
  console.log(click);
  // do the rest
}

document.querySelector('.gallery_image').addEventListener(galleryImageClick);

// vanilla JS way
document.addEventListener('DOMContentLoaded', () => {
  // query the DOM, add event listeners, etc.
});

// or jQuery way
$(document).ready(() => {
  // query the DOM, add event listeners, etc.
});