HTML 单击图像对象无效

Question

我正在尝试建立一个图片库，在点击图片时打开一个大的弹出图像或 'modal' 图片。

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

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;
}

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

非常感谢任何帮助。

Answer 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/

HTML 单击图像对象无效

HTML image object on click is not working

html

javascript

image-gallery