I've been trying to get the cat images displayed in random order from the top array. My click4pics doesn't work with the code that is shown, I get a message that the images cannot be found however when I change the image source to load only one image the function works Also the rightpath with this?

               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)

CodePudding user response：

The first parameter of any function that is used as an event handler is the "event" itself. So, if you add a console.log(i) at the beginning of the "click4pics" function, then try to click the button, you'll find that he "i" is the event object. To fix that, you may use a loop instead of passing a parameter.

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

If you aim to re-generate the random images each time the button clicked, then put all the login inside the "click4pics" function. And before regenerating images' elements, make sure that you empty the "#box" first.

    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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

If you have issues with the images' paths, Make sure you have a folder called "images" at the same level as your Html file and put the images inside it.