javascript - 显示图像 onclick 工作正常，但如何在再次单击时隐藏它

Question

所以我有这段 HTML 和 JavaScript 代码，可以在单击按钮时弹出图像，并且运行良好。但是当图像弹出时.. 无论我在页面中单击什么地方，我都无法将其关闭。是否有一个 javascript 函数可以让您在再次点击时取消显示它

这是我的代码

	<script type="text/javascript">
function openImage(){
    document.getElementById('loadingImage').style.visibility="visible";
}
</script>

#button {
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  background: Transparent;
  border: solid #ffffff 2px;
  text-decoration: none;
}

<button id="button" onClick="openImage();">Get Started</button>
<img id="loadingImage" src="PNG/Module.png" style="visibility:hidden"/>

Answer 1

function openImage(){
if ( document.getElementById('loadingImage').style.visibility == "visible" ) {
    document.getElementById('loadingImage').style.visibility="hidden";
} else {
   document.getElementById('loadingImage').style.visibility="visible";
}

(为了清晰和调试，您可能希望将函数名称从 openImage() 更改为 toggleImage() )