点击随机图片（三遍）

Question

我制作了一个包含三个图像（头部、躯干和腿）的简单页面。按下三个按钮（头、躯干、腿），其中一个随机变化：http://matti.tv/VRT/

我的问题：头部随机出现，没有缺陷，但躯干和腿出现错误（“未定义”）。我试图修复它，但我不是专家，我的代码非常混乱。

我按照earlier topic 中关于单击按钮时随机图像的提示进行操作，但使用两个额外的随机图像生成器似乎我做错了，我就是想不通。

我知道我应该将我的三个 myImage 放在一个函数中，但是我以后如何在 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 到数组长度，但是在存储 src 时，它就像 arr[17]、arr[18]

请检查下面的sn-p：

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>