Случайные изображения при нажатии (три раза)

Question

Я сделал простую страницу с тремя изображениями (голова, туловище и ноги). При нажатии трех кнопок (голова, торс, ноги) один из них изменяется случайным образом: http://matti.tv/VRT/

Моя проблема: голова появляется в случайном порядке без недостатков, но туловище и ноги дают ошибки («неопределенные»). Я попытался это исправить, но я просто не эксперт, и мой код очень грязный.

Я следил за советами в earlier topic о случайных изображениях при нажатии кнопки, но кажется, что я делаю что-то неправильно, используя два дополнительных генератора случайных изображений, и я просто не могу понять это.

Я знаю, что я должен помещать свои три myImages в одну функцию, но как их назвать позже в img и кнопке?

<script> 
    function imgchange1() {  
     var myImages1 = new Array(); 
     myImages1[1] = "1.jpg"; 
     myImages1[2] = "2.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"; 

     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"; 

     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> 

Answer 1

Это потому, что вы толкая элементы в myImages2 & mymyImages3 с индексом, начинающимся с 19 & 46 соответственно, но его необходимо использовать от 1.

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

&

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

Answer 2

В каждой функции случайные величины в пределах от 0 до длины массива, но при хранении СРК, это было как обр [17], обр [18]

Пожалуйста, проверьте фрагмент кода ниже:

function imgchange1() { 
 

 
    var myImages1 = new Array(); 
 
    myImages1[1] = "http://www.logologo.com/logos/flower-logo.jpg"; 
 
    myImages1[2] = "https://www.logobee.com/uploads/free-logo1.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[1] = "https://image.freepik.com/free-vector/abstract-and-colorful-logo_23-2147504722.jpg"; 
 
    myImages2[2] = "http://www.logospike.com/wp-content/uploads/2016/03/Free_Logo_03.jpg"; 
 
    var rnd = Math.floor(Math.random() * myImages2.length); 
 
    if (rnd == 0) { 
 
    rnd = 1; 
 
    } 
 
    console.log(myImages2[rnd]); 
 
    document.getElementById("gen-img2").src = myImages2[rnd]; 
 

 
} 
 

 
function imgchange3() { 
 

 
    var myImages3 = new Array(); 
 
    myImages3[1] = "http://www.logologo.com/logos/globe-swooshes-logo.jpg"; 
 
    myImages3[2] = "https://image.freepik.com/free-vector/infinite-logo_23-2147515990.jpg"; 
 
    var rnd = Math.floor(Math.random() * myImages3.length); 
 
    if (rnd == 0) { 
 
    rnd = 1; 
 
    } 
 

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

 
}

<center> 
 
    <p> 
 
    <img id="gen-img1" src="http://www.logologo.com/logos/flower-logo.jpg"> 
 
    </p> 
 

 
    <p> 
 
    <img id="gen-img2" src="https://image.freepik.com/free-vector/abstract-and-colorful-logo_23-2147504722.jpg"> 
 
    </p> 
 

 
    <p> 
 
    <img id="gen-img3" src="http://www.logologo.com/logos/globe-swooshes-logo.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>