Question

这是我写的代码：

<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张照片中的一张。这基本上就是我想要发生的事情。

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

如何更正此按钮以使按钮不会消失。每当我点击按钮时，我想要一个新的随机图片来替换旧图片。

Answer 1

一些事情：

数组索引从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" />

它会起作用。

Answer 2

函数：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>

Answer 3

document.write（）可以以两种方式运行

如果在加载文档时执行d.w（），则会在“当前”插入点插入文本。这是直接从脚本标记直接调用d.w（）或通过函数调用层调用的情况
如果在文档完全加载后执行了d.w（），它将清除文档并将其替换为参数。如果在回调中调用d.w（），则会在文档完全加载后执行。

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

3 个答案: