gpt4 book ai didi

javascript - 使用 JavaScript 和 HTML5 显示隐藏图像(与现有帖子相关)?

转载 作者:行者123 更新时间:2023-11-27 22:52:30 25 4
gpt4 key购买 nike

是的

 <Input type='Button'>,

迈克的建议带来了改变。

编辑下面的代码

这是一个后续问题

HTML5, div, hidden, show on click

我正在尝试根据该帖子中的最后一个答案获得一个可行的示例。

仍然对我应该如何发布这个感到困惑...我应该将我的问题作为“评论”发布以回应我关注的原始帖子吗?或者当这是一个新的(我认为)问题时我是否应该创建一个帖子?迈克推荐的其他帖子也解决了这个问题。

我希望能够1)将灯泡图像-'WebVuCoolOldBulb-2.jpg'添加到DOM(我使用'DOM'对吗?)

并且还了解如何2)替换我的仙人掌图片 - img/WebVuHedgehogCalicoCactusInBloomJoshuaTreeLaurelShimer.jpg带有灯泡图片 - WebVuCoolOldBulb-2.jp

代码运行干净,Safari 中的“显示错误控制台”没有出现任何错误。但它没有添加灯泡图像

screen shot cactus photo plus button

<html>
<body>
<form>

<img id="cactusPhoto"
src="img/WebVuHedgehogCalicoCactusInBloomJoshuaTreeLaurelShimer.jpg"
alt="Picture from Joshua Tree."
height="100" width="100" >

<button
type=button
onclick="show_image('WebVuCoolOldBulb-2.jpg', 276, 110, 'Light Bulb');">
Add Lightbulb
</button>

</form>
<script>
//https://stackoverflow.com/questions/25487865/html5-div-hidden-show-on-click
function show_image(src, width, height, alt) {
var img = document.createElement("img");
img.src = src;
img.width = width;
img.height = height;
img.alt = alt;

// This next line will just add it to the <body> tag
document.body.appendChild(img);
}
</script>
</body>
</html>

最佳答案

  • 使用type=button作为 <button> 的默认行为就是提交form因此,页面将被卸载。
  • 传递 image 的引用号元素,以便可以使用 DOM-api 访问该元素.

function show_image(id, src, width, height, alt) {
var img = document.getElementById(id);
img.src = src;
img.width = width;
img.height = height;
img.alt = alt;
}
<img id="cactusPhoto" src="img/WebVuHedgehogCalicoCactusInBloomJoshuaTreeLaurelShimer.jpg" alt="Picture from Joshua Tree." height="100" width="100">

<button type="button" onclick="show_image('cactusPhoto','WebVuCoolOldBulb-2.jpg',276,110,'Light Bulb');">Add Lightbulb</button>

关于javascript - 使用 JavaScript 和 HTML5 显示隐藏图像(与现有帖子相关)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37952083/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com