Button disappearing when clicking for random image change

Question

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.

Check here http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice — elclanrs, Jun 01 '13 at 08:04
Please fix your title to address summary of actual question, not the tag. — PSL, Jun 01 '13 at 08:04
Please don't use `var myimages=new Array()`. It looks bad, especially with the bunch of assignments that follows. Use an array literal instead, or you could generate the URL easily. — John Dvorak, Jun 01 '13 at 08:07
Also, `document.write` is pretty bad in general and should be avoided. It slows down the page parsing and it prevents your script from being possible to move around. It also cannot be used asynchronously. — John Dvorak, Jun 01 '13 at 08:09

score 3 · Answer 1 · answered Jun 01 '13 at 08:15

A few things:

Arrays' indices start from 0, not 1.
Use semicolons.
Using document.write after the DOM has been created will clear it and create a new document. 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.

score 1 · Answer 2 · edited Jun 01 '13 at 08:42

The function: document.write() will rewrite the HTML code in your DOM, so your button will disappear.

You can create a tag in your page, and change the innerHTML of the tag with JS code.

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>

score 0 · Answer 3 · answered Jun 01 '13 at 08:21

document.write() can behave in two ways

If the d.w() is executed while the document is getting loaded, the text is inserted at the 'current' insertion point. This is situation when d.w() gets called directly from a script tag, directly or via a layer of function calls
If the d.w() is executed after the document has been completely loaded, it'll wipe out the document and replace it with the argument. This will happen if d.w() is called in a callback, which is executed after the document has been completely loaded.

Button disappearing when clicking for random image change

3 Answers3