Random images Project.

[Ryan Christiani]

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.

window.onload = init; function init(){ document.getElementById("clickMe").onclick = setUp; } function setUp(){ var panel = new Array ("images/image1.jpg", "images/image2.jpg", "images/image3.jpg"); for(i=0; i<panel.length; i++){ var image = panel[i]; randomImage(image); } } function randomImage(thisImage){ alert(thisImage); //just checking to see what is getting passed to this function }

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]

Sounds like you want Math.random()

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

Eric

[Ryan Christiani]

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.

window.onload = runFunction; function randomImage(){ var panel = new Array ("images/image1.jpg", "images/image2.jpg", "images/image3.jpg"); ranNum = Math.floor(Math.random()*10); if(ranNum<3){ document.getElementById("image1").src = panel[2]; document.getElementById("image2").src = panel[1]; document.getElementById("image3").src = panel[0]; } else if(ranNum >=4 && ranNum <=6){ document.getElementById("image1").src = panel[1]; document.getElementById("image2").src = panel[0]; document.getElementById("image3").src = panel[2]; } else{ document.getElementById("image1").src = panel[2]; document.getElementById("image2").src = panel[0]; document.getElementById("image3").src = panel[1]; } } function runFunction(){ document.getElementById("clickMe").onclick = randomImage; }

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]

ids are singular, you can not have multiple elements with the same id.

Eric

[Ryan Christiani]

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