Image Gallery src attributes

#1

Hi guys im building small image gallery application. I want to change the src attribute of the main image, to equal the src attribute of the images in the thumb bar at the bottom when clicked on. But i believe my code is incorrect. I would appreciate an explanation of why my code doesnt work, thank you!

for (let i = 0; i < thumbBarImgs.length; i ++) {
thumbBarImgs[i].addEventListener(“click”, (e)=> {
displayedImage.src = e.target.src;
});
}

#2

You need to add a dot in front of thumb-bar-img in the following line:

var thumbBarImgs = document.querySelectorAll("thumb-bar-img");

EDIT: Also, instead of adding a bunch of eventListeners to the document, why not just use one eventListener on the div with class=“thumb-bar”, then change out the image based on which thumbnail image is clicked. This will allow you to replace the following:

 for (let i = 0; i < thumbBarImgs.length; i ++) {
  thumbBarImgs[i].addEventListener("click", (e)=> {
   displayedImage.src = e.target.src;
   });
 }

with this:

thumbBar.addEventListener("click", (e)=> {
   displayedImage.src = e.target.src;
});
1 Like
#3