无法加载随机图像

Question

我一直在尝试从顶部数组中以随机顺序显示猫图像。我的 click4pics 不适用于显示的代码，我收到一条消息，提示图像 找不到但是当我更改图像源以仅加载一张图像时，该功能有效 这也是正确的路径？

const cat$Images = [
  { name: "C1", img: "C1.jpg", },
  { name: "C2", img: "C2.jpg", }, 
  { name: "C3", img: "C3.jpg", }, 
  { name: "C4", img: "C4.jpg", },
]
    
let PicturePairs = [
  { name: "C1", img: "C1.jpg", 
    name: "C2", img: "C2.jpg", }, 
];
console.log(PicturePairs)
console.log(cat$Images)    
    
function shuffle(array) {
  let currentIndex = array.length,
      randomIndex;
      
  while(currentIndex != 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;
      
    [array[currentIndex], array[randomIndex]] = [
      array[randomIndex], array[currentIndex]
    ];
  }
}
      
shuffle(cat$Images)
shuffle(PicturePairs)
      
let clickImage = document.querySelector("#button")
clickImage.addEventListener("click",click4pics)

function click4pics(i) {
  let catpics=document.createElement("img")
  catpics.src=`images/${cat$Images[i].img}`;
  catpics.alt = cat$Images.src;
  document.querySelector("#box").appendChild(catpics);
  catpics.addEventListener("click", function(e) {
    console.log(e.target.src);
  })
}
    
click4pics(0)
click4pics(1)
click4pics(2)
click4pics(3)

Answer 1

任何用作事件处理程序的函数的第一个参数是“事件”本身。所以，如果你在“click4pics”函数的开头添加一个console.log(i)，然后尝试点击按钮，你会发现他的“i”是事件对象。 要解决这个问题，您可以使用循环而不是传递参数。

function click4pics() {
  for (let i = 0; i < cat$Images.length; i++) {
    let catpics = document.createElement("img")
    catpics.src = `images/${cat$Images[i].img}`;
    catpics.alt = cat$Images.src;
    document.querySelector("#box").appendChild(catpics);
    catpics.addEventListener("click", function (e) {
      console.log(e.target.src);
    })
  }
}

如果您的目标是在每次单击按钮时重新生成随机图像，则将所有登录信息放在“click4pics”函数中。在重新生成图像元素之前，请确保先清空“#box”。

    function shuffle(array) {
      let currentIndex = array.length,
        randomIndex;

      while (currentIndex != 0) {

        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex--;

        [array[currentIndex], array[randomIndex]] = [
          array[randomIndex], array[currentIndex]
        ];
      }

    }

    let clickImage = document.querySelector("#button")
    clickImage.addEventListener("click", click4pics)

    function click4pics() {
      const cat$Images = [
        { name: "C1", img: "C1.jpg", },
        { name: "C2", img: "C2.jpg", },
        { name: "C3", img: "C3.jpg", },
        { name: "C4", img: "C4.jpg", },
      ]

      let PicturePairs = [
        {
          name: "C1", img: "C1.jpg",
          name: "C2", img: "C2.jpg",
        },
      ];

      shuffle(cat$Images)
      shuffle(PicturePairs)

      document.querySelector("#box").innerHTML = ''; // empty it each time

      for (let i = 0; i < cat$Images.length; i++) {
        let catpics = document.createElement("img")
        catpics.src = `images/${cat$Images[i].img}`;
        catpics.alt = cat$Images.src;
        document.querySelector("#box").appendChild(catpics);
        catpics.addEventListener("click", function (e) {
          console.log(e.target.src);
        })
      }
    }

    click4pics()

<div id="box"></div>
<button id="button">btn</button>

如果您对图片的路径有疑问，请确保您有一个名为“images”的文件夹与您的 Html 文件处于同一级别，并将图片放入其中。