使用我拥有的代码单击时，如何使我的图像消失？

Question

我正在将图像叠加在一起，并希望做到这一点，当您单击每个图像时，它就会消失，露出下面的图像。这是我在脚本标签中的内容：

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">

Answer 1

通过 ID 定位 'heart' 更容易，因为它确实有一个 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">

您可以通过运行并点击“心”

来测试此代码

Answer 2

实际上，您的图像似乎不会重叠，除非您正在应用 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>

使用我拥有的代码单击时，如何使我的图像消失？

How do I make my images disappear when clicked using the code I have?

javascript

visibility

onclick

eventhandler