Meurisse Meurisse - 3 months ago 8
Javascript Question

Random images on click (three times)

I made a simple page with three images (a head, torso and legs). By pressing the three buttons (head, torso, legs), one of them changes randomly: http://matti.tv/VRT/

My problem: the heads show up at random without flaws, but the torso and legs give errors ("undefined"). I tried to fix it, but I'm just not an expert and my code is very messy.

I followed the tips in an earlier topic about random images on clicking a button, but it seems I'm doing something wrong by using two extra random image generators and I just can't figure it out.

I know I should be putting my three myImages in one function, but how do I call them later on in the img and button?

<script>

function imgchange1() {

var myImages1 = new Array();
myImages1[1] = "1.jpg";
myImages1[2] = "2.jpg";
myImages1[3] = "3.jpg";
myImages1[4] = "4.jpg";
myImages1[5] = "5.jpg";
myImages1[6] = "6.jpg";
myImages1[7] = "7.jpg";
myImages1[8] = "8.jpg";
myImages1[9] = "9.jpg";
myImages1[10] = "10.jpg";
myImages1[11] = "11.jpg";
myImages1[12] = "12.jpg";
myImages1[13] = "13.jpg";
myImages1[14] = "14.jpg";
myImages1[15] = "15.jpg";
myImages1[16] = "16.jpg";
myImages1[17] = "17.jpg";
myImages1[18] = "18.jpg";
var rnd = Math.floor(Math.random() * myImages1.length);
if (rnd == 0) {
rnd = 1;
}

document.getElementById("gen-img1").src = myImages1[rnd];

}

function imgchange2() {

var myImages2 = new Array();
myImages2[19] = "19.jpg";
myImages2[20] = "20.jpg";
myImages2[21] = "21.jpg";
myImages2[22] = "22.jpg";
myImages2[23] = "23.jpg";
myImages2[24] = "24.jpg";
myImages2[25] = "25.jpg";
myImages2[26] = "26.jpg";
myImages2[27] = "27.jpg";
myImages2[28] = "28.jpg";
myImages2[29] = "29.jpg";
myImages2[30] = "30.jpg";
myImages2[31] = "31.jpg";
myImages2[32] = "32.jpg";
myImages2[33] = "33.jpg";
myImages2[34] = "34.jpg";
myImages2[35] = "35.jpg";
myImages2[36] = "36.jpg";
myImages2[37] = "37.jpg";
myImages2[38] = "38.jpg";
myImages2[39] = "39.jpg";
myImages2[40] = "40.jpg";
myImages2[41] = "41.jpg";
myImages2[42] = "42.jpg";
myImages2[43] = "43.jpg";
myImages2[44] = "44.jpg";
myImages2[45] = "45.jpg";
var rnd = Math.floor(Math.random() * myImages2.length);
if (rnd == 0) {
rnd = 1;
}

document.getElementById("gen-img2").src = myImages2[rnd];

}

function imgchange3() {

var myImages3 = new Array();
myImages3[46] = "46.jpg";
myImages3[47] = "47.jpg";
myImages3[48] = "48.jpg";
myImages3[49] = "49.jpg";
myImages3[50] = "50.jpg";
myImages3[51] = "51.jpg";
myImages3[52] = "52.jpg";
myImages3[53] = "53.jpg";
var rnd = Math.floor(Math.random() * myImages3.length);
if (rnd == 0) {
rnd = 1;
}

document.getElementById("gen-img3").src = myImages3[rnd];

}

</script>

<center>
<p><img id="gen-img1" src="7.jpg"></p>

<p><img id="gen-img2" src="20.jpg"></p>

<p><img id="gen-img3" src="46.jpg"></p>

</center>

<center>
<p>

<input type="button" value="Hoofd" onclick="imgchange1();" />
<input type="button" value="Torso" onclick="imgchange2();" />
<input type="button" value="Benen" onclick="imgchange3();" />
</p>

</center>


I hope someone can help me. :)

Answer

That's because you are pushing items to your myImages2 & mymyImages3 with index starting from 19 & 46 respectively but it has to be started from 1.

myImages2[1]="19.jpg";
myImages2[2]="20.jpg";
.
.

&

myImages3[1]="46.jpg";
myImages3[2]="19.jpg";
.
.
.
Comments