• Теория
  • Теория

Добавим картинку

Обработчики клика добавили, убедились, что всё работает. Как заставить большую картинку меняться по кликам пользователя?

У изображений есть атрибут src, которым можно управлять из JavaScript. Мы уже говорили об этом раньше.

Чтобы изображение элемента с классом full-photo (переменная fullPhoto) менялось, должно измениться значение src этого элемента.

У нас есть массив с данными photos. Когда Кекс давал нам задание, он отметил, что «порядок элементов в этом массиве такой же, как и порядок миниатюр в разметке». Все превью находятся в коллекции thumbnails. Получается, элементы массива photos подходят элементам из коллекции thumbnails с тем же индексом.

Например, пользователь кликнул по самой первой миниатюре в разметке. Она же thumbnails[0] в коллекции. Тогда в большой картинке должно появиться изображение с адресом photos[0]. Получается такой код:

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

Добавим код внутрь обработчика. Будем подставлять в атрибут src значение элемента из массива photos. Индексы миниатюры и элемента с адресом картинки будут совпадать.

Хотите научиться профессионально писать код на самом востребованном языке программирования? Записывайтесь на профессию «React-разработчик», которая стартует 20 мая 2024. Всего от 4130 ₽в месяц.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Знакомство с событиями» тренажёра «Погружение в браузерный JavaScript» можно после регистрации и оформления подписки.