单击以随机更改图像时按钮消失
[英]Button disappearing when clicking for random image change
问题描述
This is the code I have written: 
这是我编写的代码：
<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>
When I test it out I see a button that says "Touch to see random picture!" 测试时，我看到一个按钮，上面写着“触摸即可看到随机图片！” Which is exactly what I want to see. 这正是我想看到的。 When I click the button one of the eleven pictures I have uploaded is displayed. 当我单击按钮时，将显示我已上传的十一张照片中的一张。 This is basically what I want to happen. 这基本上就是我想要发生的事情。
The problem is that the original button disappears. 问题是原始按钮消失了。 To see another random picture I have to reload the page and click on the button again. 要查看其他随机图片，我必须重新加载页面，然后再次单击按钮。
How do I correct this so that the button does not disappear. 我该如何纠正，以使按钮不会消失。 I want a new random picture to replace the old one each time I click on the button. 我希望每次单击按钮时都可以使用一张新的随机图片替换旧的图片。
3 个解决方案
解决方案1
3 2013-06-01 08:15:01
A few things: 一些东西：
- Arrays' indices start from 0, not 1. 数组的索引从0开始，而不是1。
- Use semicolons. 使用分号。
- Using
document.writeafter the DOM has been created will clear it and create a new document.在创建DOM之后使用document.write将清除它并创建一个新文档。 Create a new element instead or modify an existing one.而是创建一个新元素或修改现有元素。
So to fix it, change your code a little: 因此，要解决此问题，请稍微更改代码：
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';
}
Add a new element to your document: 在您的文档中添加一个新元素：
<input type="button" value="Touch to see random picture!" onclick="random_image()">
<img src="" id="random_image" />
And it'll work. 而且会起作用。
解决方案2
1 2013-06-01 08:15:07
The function: document.write() will rewrite the HTML code in your DOM, so your button will disappear. 函数： document.write()将重写DOM中的HTML代码，因此您的按钮将消失。
You can create a tag in your page, and change the innerHTML of the tag with JS code. 您可以在页面中创建标签，并使用JS代码更改标签的innerHTML 。
Example: 例：
<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>
解决方案3
0 2013-06-01 08:21:31
document.write() can behave in two ways document.write（）可以通过两种方式运行
If the dw() is executed while the document is getting loaded, the text is inserted at the 'current' insertion point.
如果在加载文档时执行dw（），则将文本插入到“当前”插入点。 This is situation when dw() gets called directly from a script tag, directly or via a layer of function calls 当dw（）直接从脚本标签直接调用或通过函数调用层调用时，就是这种情况 If the dw() is executed after the document has been completely loaded, it'll wipe out the document and replace it with the argument.
如果dw（）是在文档完全加载后执行的，它将清除文档并将其替换为参数。 This will happen if dw() is called in a callback, which is executed after the document has been completely loaded. 如果在完全加载文档后执行的回调中调用dw（），则会发生这种情况。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.