单击时的 HTML 图像对象不起作用答案

【问题标题】：HTML image object on click is not working单击时的 HTML 图像对象不起作用
【发布时间】：2023-03-31 03:50:02
【问题描述】：

我正在尝试构建一个图库，当点击图片时会打开一个大的弹出图像或“模态”图像。

我正在尝试结合这两个教程中的代码：

https://www.w3schools.com/howto/howto_js_portfolio_filter.asp https://www.w3schools.com/howto/howto_css_modal_images.asp

将鼠标悬停在图像上会使其稍微褪色，但单击绝对没有任何作用。

这是我的一段代码。

HTML：

<div class="column 1">
<div class="content">
  <img id ="myImg" src="path.png" alt="img" style="width:40%">
  <div id="myModal" class="modal">
    <span class="close">&times;</span>
    <img class="modal-content" id="img01">
    <div id="caption"></div>
  </div>
</div>

JS：

var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick() = function(){
  console.log('click')
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

没有任何东西输出到控制台，甚至没有任何错误消息。

非常感谢任何帮助。

【问题讨论】：

请发帖minimal reproducible example。您可以使用Stack Snippet 使其可执行。
你是如何组合它们的？不能重复使用同一个 ID，所以图库需要使用类，而不是 ID。
img.addEventListener('click', function(){ console.log('click') modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt; })

标签： javascript html image-gallery

【解决方案1】：

从onClick 方法中删除()，这样您的JavaScript 看起来像：

var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  console.log('click')
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

onClick 是 DOM 元素的属性，而不是函数。因此，您需要使用变量赋值语法将匿名函数赋值给变量。

见https://jsfiddle.net/7yxf3uvp/

【讨论】：