随机图像功能（javaScript）在提示时不显示本地图像

Question

所以我尝试了几件事来解决这个问题，但似乎没什么用。它之前的工作正常，但发生了一些事情，现在我不能让它显示目标div中JS数组的随机图像。

• 重命名了所有图像文件，因此它们没有空格
• 编辑document.getElementById("profPic").innerHTML = '<img src="'+imagesArray[num]+'">';几次无效
• 检查了解决方案/解决方法，但结论是必须与我不知道的文件格式有关。
• 尝试将displayImage();放入div容器中。还尝试使用document.write

＆＃13;

＆＃13;

var imagesArray = ["img/mascotImages/CCF2_(281).jpg", "img/mascotImages/CCF2_(282).jpg"];

function displayImage() {

  var num = Math.floor(Math.random() * (imagesArray.length + 1));
  document.getElementById("profPic").innerHTML = '<img src="' + imagesArray[num] + '">';
}

function myFunction(e) {
  if ((e.target.id === 'mySearch' && e.keyCode === 13) || e.target.id === 'searchButton') {
    e.preventDefault();
    var searchValue = document.getElementById("mySearch").value;
    for (var i = 0; i < users.length; i++) {
      if (users[i]['last_name'] === searchValue) {
        document.getElementById("usernameOut").innerHTML = (users[i].username);
        document.getElementById("firstNameOut").innerHTML = (users[i].first_name);
        displayImage();
        return;
      }
    }
  }
}

＆＃13;

<div id="return">
  <div id="profPic"></div>
  <!--profPic-->

  <div id="usernameOut"></div>
  <!--usernameOut-->

  <div id="firstNameOut"></div>
  <!--firstNameOut-->

</div>

＆＃13;

＆＃13;

＆＃13;

应该发生的事情是，当用户在搜索框中搜索某些内容时，来自另一个数组的数据会显示在<div id="usernameOut">和<div id="firstNameOut">等中。我希望随机图片也可以显示在用户点击搜索/点击进入。

文件的命名约定有问题吗？他们在一个太多的文件夹？我确信这很简单，但我已经盯着它看了几个小时。

Answer 1

数组索引以0开头，而不是1。因此，如果数组中只有2张图片，则最大索引应为1.但您的代码Math.floor(Math.random() * (imagesArray.length+1))有时会返回2。

摆脱+1：

Math.floor(Math.random() * imagesArray.length)