按钮消失时，点击随机图像更改

Button disappearing when clicking for random image change

本文关键字：随机 图像 消失 按钮      更新时间：2023-09-26

这是我写的代码:

<html>
<head>
</head>
<body>
<script type="text/JavaScript">
function random_imglink(){
var myimages=new Array()
myimages[1]="/pictures/101.jpg"
myimages[2]="/pictures/102.jpg"
myimages[3]="/pictures/103.jpg"
myimages[4]="/pictures/104.jpg"
myimages[5]="/pictures/105.jpg"
myimages[6]="/pictures/106.jpg"
myimages[7]="/pictures/107.jpg"
myimages[8]="/pictures/108.jpg"
myimages[9]="/pictures/109.jpg"
myimages[10]="/pictures/110.jpg"
myimages[11]="/pictures/111.jpg"
var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
document.write('<img src="'+myimages[ry]+'" border=0>')
}
</script>
<form>
<input type="button" value="Touch to see random picture!" onclick="random_imglink()">
</form>
</body>
</html>

当我测试它时，我看到一个按钮，上面写着"触摸看到随机图片!"这正是我想看到的。当我点击按钮时，显示了我上传的11张图片中的一张。这基本上就是我想要的。

问题是原来的按钮消失了。要看另一张随机图片，我必须重新加载页面并再次点击按钮。

我如何纠正这一点，使按钮不会消失。我想要一个新的随机图片来代替旧的每次我点击按钮

几点:

  • 数组的索引从0开始，不是1。
  • 使用分号。
  • 在创建DOM后使用document.write将清除它并创建一个新文档。创建一个新元素或修改一个现有的元素。

所以要修复它，稍微修改一下你的代码:

function random_image() {
    var pictures = [101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111];
    var index = Math.floor(Math.random() * pictures.length);
    var picture = pictures[index];
    document.getElementById('random_image').src = '/pictures/' + picture + '.jpg';
}

为文档添加一个新元素:

<input type="button" value="Touch to see random picture!" onclick="random_image()">
<img src="" id="random_image" />

会成功的

函数:document.write()将重写DOM中的HTML代码，因此您的按钮将消失。

你可以在你的页面中创建一个标签，并使用JS代码更改标签的innerHTML。

的例子:

<script type="text/JavaScript">
function random_imglink(){
var myimages=new Array()
myimages[1]="/pictures/101.jpg"
myimages[2]="/pictures/102.jpg"
myimages[3]="/pictures/103.jpg"
myimages[4]="/pictures/104.jpg"
myimages[5]="/pictures/105.jpg"
myimages[6]="/pictures/106.jpg"
myimages[7]="/pictures/107.jpg"
myimages[8]="/pictures/108.jpg"
myimages[9]="/pictures/109.jpg"
myimages[10]="/pictures/110.jpg"
myimages[11]="/pictures/111.jpg"
var ry=Math.floor(Math.random()*myimages.length)
document.getElementById('pic').innerHTML = '<img src="'+myimages[ry]+'" border=0>';
}
</script>
<form>
<input type="button" value="Touch to see random picture!" onclick="random_imglink()">
<div id="pic"></div>
</form>

document.write()有两种行为

  1. 如果在加载文档时执行d.w()，则文本将插入到"当前"插入点。这是d.w()直接从脚本标签调用时的情况，直接或通过函数调用层

  2. 如果d.w()在文档已经完全加载之后执行，它将清除文档并用参数替换它。如果d.w()在回调中被调用，则会发生这种情况，该回调在文档完全加载后执行。

相关文章：