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;
});
}
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;
});