JS onclick 事件处理程序 - 无响应

Question

我想要实现的目标：如果图像模糊，则单击任何图像应该显示清晰的图像；如果图像清晰，则单击任何图像应该使图像模糊

发生了什么：点击模糊图像清除图像，但再次点击它没有任何反应。因此，点击清晰图像不会模糊它（它应该如此）。

这是我的代码：

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

如果用户点击模糊图像，则完全没有响应，而在（上面的代码）之前，模糊图像至少会显示清晰图像。

为什么会这样？我看不出两者有什么区别，只是调换了条件的顺序。

Answer 1

您的示例中存在各种错误。查看代码片段，了解您要实现的目标的工作示例。

关于您的评论：

// <- why not just img.onclick = unblur ??

因为document.getElementsByTagNamereturns一个元素数组。因此，您必须遍历元素以将 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>

JS onclick 事件处理程序 - 无响应

JS onclick Event Handler - Not Responding

javascript

events

image

onclick

mouseevent