Interactive online courses HTML Academy
2026-03-09 10:59 Diff
https://htmlacademy.org/courses/javascript-browser/events/add-image

We have now added the click handlers, and we have verified that everything works. How can we make the large image change when the user clicks?

Images have a src attribute, which can be controlled from JavaScript. We already discussed how you can do this in the past.

In order for the image for the element with the full-photo class (fullPhoto variable) to change, the src value of this element must change.

We have an array with photos data. When Muffin gave us the assignment, he noted that “the order of elements in this array is the same as the order of the thumbnails in the markup.” All of the previews are located in the thumbnails collection. It turns out that the elements in the photos array are suitable for elements from the thumbnails collection with the same index.

For example, a user clicked on the very first thumbnail in the markup. It is the thumbnails[0] in the collection. In that case an image with the photos[0] address should appear in the large image. The following code is the result:

thumbnails[0].addEventListener('click', function () { fullPhoto.src = photos[0]; });

Add code inside the handler. We will substitute the value of the element from the photos array in the src attribute. The indexes of the thumbnail and element with the image address will match.