Comp Sci Generate Random Images with JavaScript: Basic Program Help Needed

AI Thread Summary
The discussion revolves around a JavaScript program designed to generate a random number and display one of seven associated images upon a button click. The user encountered issues with the image not changing in Internet Explorer, although it worked in Firefox. Key suggestions included correcting the HTML element IDs and ensuring the image source is updated correctly without overwriting the HTML structure. The user found success by adjusting the code to properly reference the image element and maintain the integrity of the output area. The conversation highlights the importance of proper element referencing and syntax in JavaScript for cross-browser compatibility.
renob
Messages
89
Reaction score
0

Homework Statement



I'm supposed to write a program that upon clicking a command button generates a random number, and displays 1 of 7 images that is associated with the random number generated.

Ive been at this for a few hours and can't get the image to change.

EDIT:
Upon further testing it seems to work on firefox, but not on internet explorer, which is the browser that it will be tested on.
Anyone know what's going on here?

The Attempt at a Solution


Code:
<html>
<head><title>Assignment #5</title></head>
<script language="Javascript">

function random()
{
	number=Math.floor(Math.random()*7);
	number=number + 1;
	
	caption= "your number is" + " " + number;

	if(number==1)
	{
		OutputArea.innerText=caption;
		document.images.src="al.jpg";
	}	
	
	else if(number==2)
	{
		OutputArea.innerText=caption;
		document.images.src="city.jpg";
	}
	else if(number==3)
	{
		OutputArea.innerText=caption;
		document.images.src="dance.jpg";
	}
	else if(number==4)
	{
		OutputArea.innerText=caption;
		document.images.src="good.jpg";
	}
	else if(number==5)
	{
		OutputArea.innerText=caption;
		document.images.src="kiss.jpg";
	}
	else if(number==6)
	{
		OutputArea.innerText=caption;
		document.images.src="sleep.jpg";
	}
	else if(number==7)
	{
		OutputArea.innerText=caption;
		document.images.src="vince.jpg";
	}
}
</script>

<body bgcolor=blue text=white onload="random()">

<center>

//initiates function

<input type="button" value="images" title="click to dislpay image" onclick="random()">

// where the messege is displayed
<B ID="OutputArea">

// where the image is displayed
<img src="al.jpg" name="images">

</body>
</html>
 
Last edited:
Physics news on Phys.org
Does the caption change when you run your script?
Shouldn't this tag - <B ID="OutputArea"> -- be <body ID ="OutputArea"> ?
In the <body> element, it looks to me like it will always display "al.jpg".
 
Yeah the caption changes.
I set the default to al.jpg because I thought the onload="random()" (contained in the body tag) would change it.
Is there anything I could replace al.jpg with?
 
Last edited:
'images' is a reserved word. It refers to the array of images.
By giving your element the name images you risk confusion.

Do this:

document.getElementById('images').src="sleep.jpg";
<img src="al.jpg" ID="images">


Or you could try this:

document.images[0].src="sleep.jpg";
 
Last edited:
I tried both, and I also changed images. Neither thing worked unfortunately.
 
renob said:
I tried both, and I also changed images. Neither thing worked unfortunately.
Post your new code.
 
You never close the <B> element. Now it makes sense why the image is never updated. It doesn't exist.

When you set OutputArea.innerText to your caption, you are overwriting all the HTML, wiping out the <img> element.



So:
Code:
<B ID="OutputArea">[B]</B>[/B]
then:
Code:
document.getElementById('OutputArea').innerText=caption
 
Nice that did it. Thanks for the help
 
renob said:
Nice that did it. Thanks for the help

Sho thang.
 

Similar threads

Replies
10
Views
3K
Replies
11
Views
3K
Replies
17
Views
3K
Replies
3
Views
3K
Replies
3
Views
9K
Back
Top