无法加载随机图像

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>

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