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

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

javascript

Javascript 单击随机图像更改时按钮消失,javascript,Javascript,这是我写的代码： <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" my

这是我写的代码：

<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>


函数随机_imglink（）{
var myimages=新数组（）
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）
如果（ry==0）
文件。写入（“”）
}

当我测试它的时候，我看到一个按钮，上面写着“触摸看随机图片”，这正是我想要看到的。当我点击按钮时，会显示我上传的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" />

它会起作用的。

有几件事：

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


函数随机_imglink（）{
var myimages=新数组（）
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=''；
}

函数：

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>


函数随机_imglink（）{
var myimages=新数组（）
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=''；
}

document.write（）有两种行为方式

如果在加载文档时执行d.w（），则文本将插入到“当前”插入点。当直接从脚本标记或通过函数调用层调用d.w（）时，就会出现这种情况

如果在文档完全加载后执行d.w（），它将删除文档并用参数替换它。如果在回调中调用d.w（），则会发生这种情况，回调在文档完全加载后执行

document.write（）的行为有两种

如果在加载文档时执行d.w（），则文本将插入到“当前”插入点。当直接从脚本标记或通过函数调用层调用d.w（）时，就会出现这种情况

如果在文档完全加载后执行d.w（），它将删除文档并用参数替换它。如果在回调中调用d.w（），则会发生这种情况，回调在文档完全加载后执行

选中此处请将标题改为实际问题的摘要，而不是标记。请不要使用

var myimages=new Array（）

。这看起来很糟糕，尤其是接下来的一大堆作业。改用数组文字，或者您可以轻松生成URL。另外，

document.write

通常非常糟糕，应该避免。它会减慢页面解析速度，并阻止脚本四处移动。它也不能异步使用。请检查此处，将标题改为实际问题的摘要，而不是标记。请不要使用

var myimages=new Array（）

。这看起来很糟糕，尤其是接下来的一大堆作业。改用数组文字，或者您可以轻松生成URL。另外，

document.write

通常非常糟糕，应该避免。它会减慢页面解析速度，并阻止脚本四处移动。它也不能异步使用。