wood burning stoves 2.0*
The moose likes HTML, CSS and JavaScript and the fly likes Random images Project. Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Android Security Essentials Live Lessons this week in the Android forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Random images Project." Watch "Random images Project." New topic
Author

Random images Project.

Ryan Christiani
Ranch Hand

Joined: May 15, 2011
Posts: 30
Hi, I am trying to learn JavaScript, and I am trying to apply what i learn from the book I am working through, as well as some video lessons, to projects. Also I really need a place to talk about it, I hope this is the right place for someone like me!

I came up with the project to swap images that are already displayed. I have 3 images on the page in a unordered list. Each has an Id of image1, image2, image3. and the images are called that same .jpg.
When you click a button I would like them to switch, the goal is at random. But for now I want to settle on simply switching order. Here is the code I have so far.



I am having trouble figuring out how to swap them. I loop through an array of strings with the image paths. I send that to a function. What should i look at in order to store the images and then swap them. Would a switch statement make sense here? Based on randomly generated numbers? Or would another for loop maybe make sense? This function seems to be confusing me the most.

I don't want the solution, that would get me no where, but could someone help me with the right direction.

Thanks


Probably going to ask a lot of possibly stupid questions...but how else will I learn? am I right!
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Sounds like you want Math.random()

Probably also want document.getElementById and set the img src.

Eric
Ryan Christiani
Ranch Hand

Joined: May 15, 2011
Posts: 30
Hey thanks eric.

I used the Math.floor to get an intager for math.random, between 1 and 10, and still using an array to store the string sources, and it works!
But when i add more then one div containg the same content the script only effects the top panel, why would it not alter the others? Imagine a 3x3 square.



All the divs, with list items, and images, have the same id's attached to them. the only different is the parent div id, which i make no reference to in my javascript, what could cause this to happen?
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
ids are singular, you can not have multiple elements with the same id.

Eric
Ryan Christiani
Ranch Hand

Joined: May 15, 2011
Posts: 30
That makes sense, I changed it around, created 2 new functions to handle the new image id's and it works.

Is there a better way of having the functions randomize the images, with out having to write out every possible position they could be in? Something more elegant?

Thanks
 
It is sorta covered in the JavaRanch Style Guide.
 
subject: Random images Project.
 
Similar Threads
is null question
Randomly displaying images from a directory with JavaScript?
Copy Picture (Image)
Script for clickOn() text will change the image
Configuring Apache Webserver