Q: how to overcome error in images array in javascript 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
this js code I triedenter image description here so far


// 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<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";
// }
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" src='index.css'>
</head>
<body>
  <div id="expandedImage" style="width:800px; height:500px;float:left; 
border: 1px solid black">
  </div>
  <!-- <div id="con"></div> -->
  <div id="main" style="width:150px; height: 500px; overflow-y: 
scroll;float:right"> 
  </div>
  <script src="index.js"></script>
</body
</html>


I expect the output to be the image I click on, but the actual output is the 7th image of my array

A: You are passing img variable and your img variable have last created img element.
Instead of img document.getElementById('expandedImage').appendChild(img);
pass this to append click image.
document.getElementById('expandedImage').appendChild(this);


var image = [
  "https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg",
  "themes/theme2.jpg",
  "themes/theme3.jpg",
  "themes/theme4.jpg"
];
var arrayLength = image.length;
var i;
var div = document.getElementById("main");
for (i = 0; i < 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) {
    document.getElementById('expandedImage').appendChild(this);
  }, false);
  div.appendChild(img);
  // img = null;
}
<div id="expandedImage" style="width:800px; height:500px;float:left; 
        border: 1px solid black">
</div>
<!-- <div id="con"></div> -->
<div id="main" style="width:150px; height: 500px; overflow-y: 
        scroll;float:right">
</div>



A: Instead of appending a new child to the expandedImage div why don't you create a new image tag inside expanded image div with the id as expandedImage and change the src of that image on each image scroll bar click.
Hope this helps.
Here is working JSFiddle link 


// var div = document.createElement("div");
// div.style.width = "300px";
// div.style.height = "300px";
// div.style.background = "red";
// document.getElementById("con").appendChild(div);
var image=  
[ 
  "https://www.technology-solved.com/wp-content/uploads/2019/03/password-best-practices-image.png",
  "https://mycomputerexperts.net/wp-content/uploads/2018/04/webbrowsing.jpg",
  "https://www.royaloakindia.com/uploads/ROYIND-royaloak-amber-computer-table-small-800x50072.jpg"
];
var arrayLength=image.length;
var i;
var div = document.getElementById("main");
for (let i =0;i<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').src = image[i];
  },false);
  div.appendChild(img);
  // img = null;
}

// Default image
document.getElementById('expandedImage').src = image[0];


// function myFunction(img) {
//   var expandImg = document.getElementById("expandedImg");
//   var main = document.getElementById("main");
//   expandImg.src = img.src;
//   expandImg.parentElement.style.display = "block";
// }
#expandedWrapper {
  width: 100vw;
  max-width: 800px;
  max-height: 500px;
  border: 1px solid black;
  margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" src='index.css'>
</head>
<body>
  <div id="expandedWrapper">
    <img id="expandedImage" src="">
  </div>
  <!-- <div id="con"></div> -->
  <div id="main" style="width:150px; height: 500px; overflow-y: 
scroll;float:right"> 
  </div>
  <script src="index.js"></script>
</body
</html>



A: The reason why this was a problem is because JS has something called "hoarding". Basically if you write this:
if (true) {
    var x = 4;
}

It becomes this:
var x;
if (true) {
    x = 4;
}

To fix this you can use let insead of var


// 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<arrayLength;i++)
{
  let 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";
// }
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" src='index.css'>
</head>
<body>
  <div id="expandedImage" style="width:800px; height:500px;float:left; 
border: 1px solid black">
  </div>
  <!-- <div id="con"></div> -->
  <div id="main" style="width:150px; height: 500px; overflow-y: 
scroll;float:right"> 
  </div>
  <script src="index.js"></script>
</body
</html>


