Question

So basically what I am looking for is how to have a random image javascript code but the images are in two different divs but I would like the random images to come from the same array.

I plan to take a JS class this summer so I don’t have to ask anymore because I feel like this should be simple…

Currently I am just using the code from javascript kit in two different locations:

<script language="JavaScript">
<!--

/*
Random Image Script- By JavaScript Kit (http://www.javascriptkit.com) 
Over 400+ free JavaScripts here!
Keep this notice intact please
*/

function random_imglink(){
    var myimages=new Array()
    //specify random images below. You can have as many as you wish
    myimages[1]="image1.gif"
    myimages[2]="image2.gif"
    myimages[3]="image3.gif"
    myimages[4]="image4.gif"
    myimages[5]="image5.gif"
    myimages[6]="image6.gif"

    var ry=Math.floor(Math.random()*myimages.length)
    if (ry==0)ry=1
    document.write('<img src="'+myimages[ry]+'" border=0>')
}
random_imglink()
//-->
</script>

but what I hope to achieve is:

<script language="JavaScript">
<!--

/*
Random Image Script- By JavaScript Kit (http://www.javascriptkit.com) 
Over 400+ free JavaScripts here!
Keep this notice intact please
*/

function random_imglink(){
    var myimages=new Array()
    //specify random images below. You can have as many as you wish
    myimages[1]="image1.gif"
    myimages2[1]="image1a.gif"
    myimages[2]="image2.gif"
    myimages2[2]="image2a.gif"

    var ry=Math.floor(Math.random()*myimages.length)
    if (ry==0) ry=1
    document.write('<img src="'+myimages[ry]+'" border=0>')
}
random_imglink()
//-->
</script>

RENDERED CODE WITHIN DIVS

<div class="one"><img src="img1.gif"></div>
<div class="two"><img src="img1a.gif"></div>

REFRESHED

<div class="one"><img src="img2.gif"></div>
<div class="two"><img src="img2a.gif"></div>

Answer 1

For what you are wanting to do, I don’t see the point to store them on arrays and do complex stuff to get them.

If the URL paths are the same, there is no need to chose them from an array:

function refreshImages() {
    var max = 10;
    var rand = (Math.floor(Math.random() * max) + 1); //1-10
    var src1 = "http://example.com/image" + rand + ".gif";
    var src2 = "http://example.com/image" + rand + "a.gif";

    document.getElementById("div1").innerHTML = "<img src='" + src1 + "' />";
    document.getElementById("div2").innerHTML = "<img src='" + src2 + "' />";
}

window.onload = function() {//need to wait until the divs are loaded
    refreshImages();
}​

and in your HTML:

<div id="div1"></div>
<div id="div2"></div>

Note: I added +1 to rand because in your example you started at image1, if you want the possibility to start at image0, just remove the +1 and the range of possibilities will change to 0-9

jsFiddle demo (because the images don’t exist, you need to see the source code)