如何在按钮单击时加载图像？

【问题标题】：How to load an image on button click?如何在按钮单击时加载图像？
【发布时间】：2014-07-03 01:21:16
【问题描述】：

我是 HTML / Javascript 的新手，我正试图弄清楚如何制作它，所以当我单击按钮时，会加载图像。这就是我能想到的全部了，但话说回来，我对这些东西很不满意，而且我仍在学习非常好。

<html>
<div style="visibility:invisible" id="theTrick">
<img id="myImage" src="https://minecraft.net/images/logo.png" alt="Test">
</div>
<button type="button" onclick="myFunction">Click for the Minecraft Logo</button>
<script>
function myFunction() {

    document.getElementById="theTrick".style = "visibility:initial"

}
</script>
</html>

编辑

我已经解决了这个问题，从那以后学到了很多东西，掌握了 HTML 和 CSS，现在学习了 JavaScript。我确实有一个问题要补充一下；有没有办法让图像在再次单击时消失，然后在下次单击时重新出现，依此类推？

【问题讨论】：

标签： javascript image button toggle visibility

【解决方案1】：

一些事情：

是visibility: hidden，不是visibility: invisible。
这是myFunction()，而不是myFunction。
是document.getElementById("theTrick")，不是document.getElementById = "theTrick"。
它是visibility: visible，而不是visibility: initial（初始可见性是hidden，您已在顶部设置）。

您可能会发现 CSS visibility 属性上的 this document 很有用。

Demo

【讨论】：

还有一些支持文档可能对here有帮助。
谢谢，我可以演示一下如何再次单击按钮来重置它吗？
@user3799724 只需将所有样式属性反转为它们的visibility 对应项。您可能还想查看jQuery hide function。