CODEWITHSUNDEEP
javascript
user2442760
user2442760

Reputation: 1

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.

Upvotes: 0

Views: 346

Answers (3)

heheMouse
heheMouse

Reputation: 11

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>

Upvotes: 1

user414441
user414441

Reputation:

document.write() can behave in two ways

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

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

Upvotes: 0

Blender
Blender

Reputation: 298206

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.

Upvotes: 3

Related Questions