Generate Random Images with JavaScript: Basic Program Help Needed

  • Context: Comp Sci 
  • Thread starter Thread starter renob
  • Start date Start date
  • Tags Tags
    Javascript Program
Click For Summary

Discussion Overview

The discussion revolves around a homework assignment requiring the creation of a JavaScript program that generates a random number and displays one of seven associated images upon a button click. The focus includes troubleshooting issues with the image not changing in Internet Explorer, as well as code corrections and improvements.

Discussion Character

  • Homework-related
  • Technical explanation
  • Debate/contested

Main Points Raised

  • One participant describes the problem of the image not changing in Internet Explorer, despite working in Firefox.
  • Another participant questions whether the caption changes and suggests that the tag should be changed to for proper functionality.
  • A participant notes that the default image is set to al.jpg and asks if it can be replaced.
  • Concerns are raised about using 'images' as a name for an element since it is a reserved word, leading to potential confusion.
  • Suggestions are made to use document.getElementById or document.images[0] to correctly reference the image element.
  • One participant points out that the element is not closed, which could prevent the image from updating correctly.
  • A later reply confirms that correcting the element resolved the issue.

Areas of Agreement / Disagreement

Participants generally agree on the need for code corrections, but there are multiple approaches suggested for resolving the image update issue. The discussion remains unresolved regarding the best method to implement these changes.

Contextual Notes

There are limitations in the code related to the use of reserved words and the handling of HTML elements, which may affect functionality across different browsers. The discussion does not resolve these limitations fully.

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

Comp Sci Blackjack program in javascript
  • · Replies 10 ·
Replies
10
Views
3K
Comp Sci Errors during executing the program (Compaq Visual Fortran)
  • · Replies 5 ·
Replies
5
Views
2K
Python BigGANModel -- Trying to train a model to generate images
  • · Replies 1 ·
Replies
1
Views
2K
Comp Sci My C++ simple program is not compiling - Need help, thanks
  • · Replies 11 ·
Replies
11
Views
3K
Comp Sci Need Help with Programming Class: Convert Feet & Metres
  • · Replies 17 ·
Replies
17
Views
3K
Comp Sci Java Stack Calculator | RPN Conversion Help for Beginners
  • · Replies 3 ·
Replies
3
Views
3K
My Daughter's First Program: A Random Number Generator
  • · Replies 12 ·
Replies
12
Views
4K
Undergrad PHP Random number generator (Need help)
  • · Replies 3 ·
Replies
3
Views
9K