title: how to overcome error in images array in javascript
body: <p>I am trying to insert images (at present there are 7 images)into an array using a for loop and preview(display) those images in a scroll bar. the particular image from the scroll bar on click should appear in the given div.(the should be expanded to the size of the div)
  this is for a certificate generator</p>
  
  <p>this js code I tried<a href="https://i.stack.imgur.com/dWhlX.png" rel="nofollow noreferrer">enter image description here</a> so far</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// var div = document.createElement("div");
  // div.style.width = "300px";
  // div.style.height = "300px";
  // div.style.background = "red";
  // document.getElementById("con").appendChild(div);
  var image=  
  [
    "themes/theme1.jpg",
    "themes/theme2.jpg",
    "themes/theme3.jpg",
    "themes/theme4.jpg",
    "themes/theme5.jpg",
    "themes/theme6.jpg",
    "themes/theme7.jpg"
  ];
  var arrayLength=image.length;
  var i;
  var div = document.getElementById("main");
  for (i =0;i&lt;arrayLength;i++)
  {
    var img=document.createElement("img");
    img.setAttribute("src",image[i]);
    img.setAttribute("width","100");
    img.setAttribute("height","100");
    img.addEventListener('click', function click(event) {
      console.log(img);
      document.getElementById('expandedImage').appendChild(img);
    },false);
    div.appendChild(img);
    // img = null;
  }
  // function myFunction(img) {
  //   var expandImg = document.getElementById("expandedImg");
  //   var main = document.getElementById("main");
  //   expandImg.src = img.src;
  //   expandImg.parentElement.style.display = "block";
  // }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" src='index.css'&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="expandedImage" style="width:800px; height:500px;float:left; 
  border: 1px solid black"&gt;
    &lt;/div&gt;
    &lt;!-- &lt;div id="con"&gt;&lt;/div&gt; --&gt;
    &lt;div id="main" style="width:150px; height: 500px; overflow-y: 
  scroll;float:right"&gt; 
    &lt;/div&gt;
    &lt;script src="index.js"&gt;&lt;/script&gt;
  &lt;/body
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I expect the output to be the image I click on, but the actual output is the 7th image of my array</p>