title: Can't load random images
body: <p>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?</p>
  <pre class="lang-js prettyprint-override"><code>const cat$Images = [
    { name: &quot;C1&quot;, img: &quot;C1.jpg&quot;, },
    { name: &quot;C2&quot;, img: &quot;C2.jpg&quot;, }, 
    { name: &quot;C3&quot;, img: &quot;C3.jpg&quot;, }, 
    { name: &quot;C4&quot;, img: &quot;C4.jpg&quot;, },
  ]
      
  let PicturePairs = [
    { name: &quot;C1&quot;, img: &quot;C1.jpg&quot;, 
      name: &quot;C2&quot;, img: &quot;C2.jpg&quot;, }, 
  ];
  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(&quot;#button&quot;)
  clickImage.addEventListener(&quot;click&quot;,click4pics)
  
  function click4pics(i) {
    let catpics=document.createElement(&quot;img&quot;)
    catpics.src=`images/${cat$Images[i].img}`;
    catpics.alt = cat$Images.src;
    document.querySelector(&quot;#box&quot;).appendChild(catpics);
    catpics.addEventListener(&quot;click&quot;, function(e) {
      console.log(e.target.src);
    })
  }
      
  click4pics(0)
  click4pics(1)
  click4pics(2)
  click4pics(3)
  </code></pre>