使用已有的代码单击后，如何使图像消失？

如何解决使用已有的代码单击后，如何使图像消失？

我要将图像彼此叠加，因此当单击每个图像时，它会消失，从而在下面显示图像。这是我在脚本标签中的内容：

function attach_eventhandler(d){
    d.onclick = function(){
        this.style.visibility = "hidden";
    }
}
var myArray = document.getElementsByTagName("heart");
for(var d of myArray){
  attach_eventhandler(d);
}

这些是我现在拥有的两个图像。我希望“心”消失，然后“猪”消失。

<img id="pig"src="pig.jpg" alt= height="700 px" width="500 px">

<img id="heart"src="heart.jpg" alt= height="700 px" width="500 px">

解决方法

通过ID定位“心脏”更为容易，因为它确实具有ID

const heart = document.getElementById("heart");
heart.addEventListener("click",() => {
  heart.style.visibility = "hidden";
})

<img id="pig" src="pig.jpg" alt="pig" height="700 px" width="500 px">

<img id="heart" src="heart.jpg" alt="heart" height="700 px" width="500 px">

您可以通过运行该代码并单击“心脏”来测试该代码

实际上，除非应用css，否则图像似乎不会重叠。要使它们重叠，您应该使用position：absolute。像这样：

<div>
    <img id="pig"src="pig.jpg" alt= height="700 px" width="500 px" style="position:absolute;top:0;left:0">
    <img id="heart"src="heart.jpg" alt= height="700 px" width="500 px" style="position:absolute;top:0;left:0">
</div>

此外，您还希望使用“ img”而不是“ heart”来调用getElementsByTagName（），如下所示：

var myArray = document.getElementsByTagName("img");``

这是完整的页面：

<html>
<head>
</head>
<body>
<div>
    
    <img id="pig"src="pig.jpg" alt= height="700 px" width="500 px" style="position:absolute;top:0;left:0">
<img id="heart"src="heart.jpg" alt= height="700 px" width="500 px" style="position:absolute;top:0;left:0">  
</div>  
<script>
function attach_eventhandler(d){
    d.onclick = function(){
        this.style.visibility = "hidden";
    }
}
var myArray = document.getElementsByTagName("img");
for(var d of myArray){
  attach_eventhandler(d);
}
</script>

</body>
</html>

编辑：哦，实际上，也许您正在这样做，但是您应该使用DOMContentLoaded事件运行脚本，如下所示：

<script>
    window.addEventListener('DOMContentLoaded',function() {
        var myArray = document.getElementsByTagName("img");
        for(var d of myArray){
          attach_eventhandler(d);
        }
    });
    function attach_eventhandler(d){
        d.onclick = function(){
            this.style.visibility = "hidden";
        };
    }

</script>