This week's book giveaway is in the Design forum.
We're giving away four copies of Design for the Mind and have Victor S. Yocco on-line!
See this thread for details.
Win a copy of Design for the Mind this week in the Design forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Random images Project.

 
Ryan Christiani
Ranch Hand
Posts: 30
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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

 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Sounds like you want Math.random()

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

Eric
 
Ryan Christiani
Ranch Hand
Posts: 30
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
ids are singular, you can not have multiple elements with the same id.

Eric
 
Ryan Christiani
Ranch Hand
Posts: 30
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic