javascript - 如何在单击按钮时加载图像?

标签 javascript image button toggle visibility

我是 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。不过,我确实有一个问题要补充;有没有办法让图像在再次点击时消失,然后在下一次点击时重新出现,依此类推?

最佳答案

一些事情:

  1. visibility: hidden,不是visibility: invisible
  2. myFunction(),不是myFunction
  3. document.getElementById("theTrick"),不是document.getElementById = "theTrick"
  4. 它是visibility: visible,而不是visibility: initial(初始可见性是hidden,您已在顶部设置)。

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

Demo

关于javascript - 如何在单击按钮时加载图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24543550/

相关文章:

javascript - JS : Why when I click the button nothing happens?

javascript - jQuery 无法根据选择选项显示/隐藏元素

javascript - 在 Meteor 1.3.x 中,如何从 imports/api 中添加一个集合?

image - 将图片作为 http GET 响应获取并插入电子表格而不保存图片

css - 在 Chrome/IE9 中去除图像边框

javascript - 隐藏切换按钮

ios - SwiftUI 中另一个按钮内的按钮

JavaScript bool 类型

javascript - 仅使用 CSS 更改图像。

python - 将时刻与阈值图像一起使用时出现 OpenCV TypeError