JS onclick事件处理程序-没有响应

JS onclick Event Handler - Not Responding

本文关键字：响应 程序 onclick 事件处理 JS      更新时间：2023-09-26

我想要实现的是:点击任何图像都应该显示一个清晰的图像，如果图像是模糊的，或者模糊的图像，如果图像是清晰的

发生了什么:点击模糊图像清除图像，但再次点击它没有任何作用。因此，点击一个清晰的图像不会模糊它(虽然它应该)。

下面是我的代码:

<script>
    window.onload = init;
    function init(e) {
        var img = document.getElementsByTagName("img"); 
        //var img = document.getElementById('pics');
        img[0].onclick = unblur;  // <- why not just img.onclick = unblur ??
        img[1].onclick = unblur;
        img[2].onclick = unblur;
        console.log(img);
/*
        var imageId = e.target.id;  //zero
        var img = document.getElementById(imageId);
        */
        //img.onclick = unblur;
    }
    function unblur(e) {
        var imageId = e.target.id;  //zero
        var img = document.getElementById(imageId);
        var imageSource = img.src; //zeroblur.jpg
        var clearImg = imageSource.substring(0, imageSource.length - 8);
        var unblurredImg = imageId.concat('.jpg');   // zero.jpg
        var blurredImg = imageId.concat('blur.jpg'); // zeroblur.jpg
        console.log(imageSource);
        console.log(img.src);
        //console.log(imageSource);

        if (img.src == unblurredImg) {  
            img.src = blurredImg;
        } else {
            img.src = unblurredImg;  // image is clear, so hide the pic
        }   
/*
         if (img.src == blurredImg) {
                img.src = unblurredImg;
        }
    } */
    //}
    } 
    /*  
        //if (!(imageId instanceof img)) {
        if (imageId !== "pics") {
            if (img.src == blurredImg) {  
                img.src = unblurredImg; 
             } else if (img.src == unblurredImg) {
                img.src = blurredImg;
             }   // image is blurred, so reveal the pic
        else {
            console.log("hi");
        }
        //debugger;
    }
}
*/
        /*
        var img = document.getElementById('zero');
        img.src = "zero.jpg";
        */

</script>
</head>
<body>
<div id="pics">
<img id="zero" src="zeroblur.jpg">
<img id="one" src="oneblur.jpg">
<img id="two" src="two.jpg">
</div>
</body>
</html>

我还注意到，如果我将函数unblur(e)中的条件切换为如下…

if (img.src == unblurredImg) {  
    img.src = blurredImg;
} else {
    img.src = unblurredImg;  
}

如果用户点击一个模糊的图像，则没有任何响应，而在此之前(上面的代码)，模糊的图像至少会显示清除后的图像。

为什么会发生这种情况?我看不出两者之间有什么区别，只是交换了条件的顺序。

你的例子中有各种各样的错误。查看下面的代码片段，了解您想要实现的目标。

关于你的评论:

//<-为什么不只是img呢?Onclick = unblur ??

因为document.getElementsByTagName返回一个元素数组。因此，您必须遍历元素以将onclick处理程序应用于每个元素。

(function(document) {
  var array = document.getElementsByTagName("img");
  for (var i = 0; i < array.length; i++) {
    array[i].onclick = toggleBlur;
  }
  function toggleBlur(event) {
    var img = event.target;
    var oldSrc = img.src; // Save to display in the console
    if (img.src.endsWith("blur.jpg")) {
      img.src = img.id + ".jpg";
    } else {
      img.src = img.id + "blur.jpg"
    }
    console.log(oldSrc + " -> " + img.src + " on element.id=" + img.id);
  }
})(document);
<body>
  <div id="pics">
    <img id="zero" src="zero.jpg">
    <img id="one" src="one.jpg">
    <img id="two" src="twoblur.jpg">
  </div>
</body>

相关文章：