Can't load random images

76
November 14, 2021, at 07:30 AM

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)
Answer 1

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>

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.

READ ALSO
Google Cloud Vision Text Detection - Ignore Text on Logos

Google Cloud Vision Text Detection - Ignore Text on Logos

I'm using the following code to detect text on an image and then get that result as a string array:

63
Android ContentProvider receiving end: Threading necessity or not?

Android ContentProvider receiving end: Threading necessity or not?

When I extend ContentProvider and implement the call() API:

67
Python server - How to communicate between multiple clients?

Python server - How to communicate between multiple clients?

I'm writing a python3 server using socket and selectors, I want to achieve the communication between clientsBut I can only send the message back to client themselves instead of other clients

124
Array of Generic List

Array of Generic List

I am playing with Generic and arrays, it seems the following code compiles fine,

68