Question

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

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

我按照earlier topic中关于点击按钮的随机图片的提示，但似乎我通过使用两个额外的随机图像生成器做错了，我只是想不出来。

我知道我应该将我的三个myImages放在一个函数中，但是如何在img和button中调用它们呢？

<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

在每个函数中，随机值的范围从0到数组长度，但在存储src时，它就像arr [17]，arr [18]

请查看以下代码段：

＆＃13;

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];

}

＆＃13;

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

＆＃13;

Answer 2

那是因为你要把物品推到myImages2＆amp;索引从mymyImages3开始的19＆amp; 46分别为1，但必须从myImages2[1]="19.jpg"; myImages2[2]="20.jpg"; . .开始。

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

＆安培;

lapply

点击随机图片（三次）

2 个答案: