Win a copy of Cross-Platform Desktop Applications: Using Node, Electron, and NW.js this week in the JavaScript forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic

Random images Project.  RSS feed

 
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
 
It is sorta covered in the JavaRanch Style Guide.
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!