Generate Random Images with JavaScript: Basic Program Help Needed

In summary, The conversation is about a person trying to write a program that generates a random number and displays an associated image. They are having trouble getting the image to change and realize it works on Firefox but not Internet Explorer. The expert suggests avoiding using "images" as a reserved word and making sure the <B> element is closed before overwriting it with the caption.
  • #1
renob
89
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
  • #2
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".
 
  • #3
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:
  • #4
'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:
  • #5
I tried both, and I also changed images. Neither thing worked unfortunately.
 
  • #6
renob said:
I tried both, and I also changed images. Neither thing worked unfortunately.
Post your new code.
 
  • #7
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
 
  • #8
Nice that did it. Thanks for the help
 
  • #9
renob said:
Nice that did it. Thanks for the help

Sho thang.
 

1. What is a basic javascript program?

A basic javascript program is a set of instructions written in the javascript programming language that can be executed by a computer. It can perform tasks such as manipulating web page elements, validating user input, and handling user interactions.

2. What are the essential components of a basic javascript program?

The essential components of a basic javascript program include variables, data types, operators, control structures (such as if/else statements and loops), functions, and events. These components work together to create a functioning program.

3. How do I start writing a basic javascript program?

To start writing a basic javascript program, you will need a text editor to write your code, and a web browser to test and run your program. You can also use online code editors and compilers to practice and test your code.

4. Can I learn javascript without any prior programming experience?

Yes, you can learn javascript without any prior programming experience. However, having a basic understanding of programming concepts such as variables, loops, and functions can make the learning process easier.

5. What are some resources for learning how to write a basic javascript program?

There are many online resources available for learning javascript, such as tutorials, courses, and coding challenges. Some popular websites for learning javascript include Codeacademy, W3Schools, and FreeCodeCamp. You can also refer to official documentation and books for a more comprehensive understanding of the language.

Similar threads

Python BigGANModel -- Trying to train a model to generate images
    • Programming and Computer Science
Replies
1
Views
1K
My Daughter's First Program: A Random Number Generator
    • General Discussion
Replies
12
Views
3K
PHP Random number generator (Need help)
    • General Math
Replies
3
Views
9K

Hot Threads

Recent Insights

Back
Top