0

这是我写的代码：

<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 张图片中的一张会显示出来。这基本上是我想要发生的事情。

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

如何更正此问题，以使按钮不会消失。每次单击按钮时，我都想要一张新的随机图片来替换旧图片。

4

3 回答 3

3

一些东西：

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

它会起作用的。

于 2013-06-01T08:15:01.650 回答
1

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

您可以在页面中创建标签，并innerHTML使用 JS 代码更改标签的名称。

例子：

<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>
于 2013-06-01T08:15:07.880 回答
0

document.write() 有两种行为方式

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

  2. 如果 dw()在文档完全加载后执行，它将清除文档并用参数替换它。如果在文档完全加载后执行的回调中调用 dw()，就会发生这种情况。

于 2013-06-01T08:21:31.303 回答