具有Javascript的简单图像库需要旋转图像吗？

Question

This was supposed to be a simple photogallery in javascript that would rotate the thumbnail images randomly into the bigger image. I had the basic gallery working before I changed it to align with the class, so I think something is wrong with my onclick function (what I changed). I cannot figure out why though. At the bottom I added what I was asked to change, but I'm not supposed to use.

My 1st Javascript Photo Gallery

<div id = "mainImg" ></div>        
<div id = "thumbs" ></div>   

<script>
    var pics = new Array();
    pics[0] = 'cat.jpg';
    pics[1] = 'dog.jpg';
    pics[2] = 'panda.jpg';
    pics[3] = 'piggy.jpg';       

    var picsDesc = new Array();
    picsDesc[0] = 'Cat';
    picsDesc[1] = 'Dog';
    picsDesc[2] = 'Panda';
    picsDesc[3] = 'Piggy';     

    //display stuff
    document.getElementById('mainImg').innerHTML = `<img src = '${pics[0]}' class = "mainSize" alt = '${picsDesc[0]}'>`;
    for(let i = 0; i<pics.length; i++){
        document.getElementById('thumbs').innerHTML += `<img src = '${pics[i]}' class = "thumbSize" alt = '${picsDesc[i]}' onclick = "change(${i})"/>`;              
    }

    //change picture functions
    var rotate = setInterval(changeOn3, 3000);

    function changeOn3(){
        meh = Math.ceil(Math.random() * 3);
        change(meh);   
    }

    function change(index){                 
        document.getElementById('mainImg').src = pics[index];           
    }      

//function changeImg(event){
//      var target = event.target;
//
//      if(target.tagName == "IMG"){
//            document.getElementById("mainImg").src = 
//target.getAttribute("src");
//      }
//} 

 </script>

Answer 1

        document.getElementById('mainImg').innerHTML = `<img src = '${pics[index]}' class = "mainSize" alt = '${picsDesc[index]}'>`; 

This should be your answer. You cannot change the DOM element's .src when u have not defined it in the actual HTML code.