Teoría
Teoría

Usar cierres en los manejadores

Ahora que conocemos los ámbitos y los cierres, volvamos a la galería. ¿Qué ocurrió en nuestro código? ¿Por qué no funciona como esperamos?

for (var i = 0; i < thumbnails.length; i++) {
  thumbnails[i].addEventListener('click', function () {
    fullPhoto.src = photos[i];
  });
}

Los manejadores utilizan el contador i, pero no se ejecutan al crearlos: esperan al clic. Cuando hacemos clic por primera vez, el ciclo ya terminó y i vale 5. El ciclo no crea un ámbito de función para la variable declarada con var. En este código, i está en el ámbito global y todos los manejadores acceden a esa misma variable. Por eso todos utilizan 5. No tenemos una miniatura ni un elemento de photos con ese índice, así que la imagen no aparece.

¿Cómo lo resolvemos? ¡Con cierres!

Crearemos una función que reciba una miniatura y el elemento correspondiente de photos. Dentro añadiremos el manejador. Así, cada manejador tendrá acceso a los parámetros de la llamada en la que fue creado.

Cada llamada tendrá sus propias variables thumbnail y photo. Los manejadores dejarán de depender del mismo contador global.

Mejoremos el programa paso a paso para que funcione correctamente.

index.html
style.css
script.js

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Galería de Cupcake</title> <link href="gallery/setting.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="pattern"> <section class="gallery"> <h1>Galería de Cupcake</h1> <p class="gallery__photo-full"> <img class="full-photo" src="gallery/laptop-large.jpg" width="550" height="367" alt="Fotografía ampliada de Cupcake"> </p> <p class="gallery__photo-previews"> <button class="gallery__photo-preview" type="button"> <img src="gallery/laptop.jpg" alt="Miniatura de Cupcake con una computadora portátil"> </button> <button class="gallery__photo-preview" type="button"> <img src="gallery/microphone.jpg" alt="Miniatura de Cupcake con un micrófono"> </button> <button class="gallery__photo-preview" type="button"> <img src="gallery/keyboard.jpg" alt="Miniatura de Cupcake con un teclado"> </button> <button class="gallery__photo-preview" type="button"> <img src="gallery/signboard.jpg" alt="Miniatura de Cupcake con un letrero"> </button> <button class="gallery__photo-preview" type="button"> <img src="gallery/tree.jpg" alt="Miniatura de Cupcake junto a un árbol"> </button> </p> </section> <script src="script.js"></script> </body> </html>

CSS

.gallery { display: flex; flex-direction: column; align-items: center; } .gallery__photo-full { margin-bottom: 12px; } .gallery__photo-full img { display: block; } .gallery__photo-previews { display: flex; list-style-type: none; margin: 0; width: 550px; padding: 0; justify-content: space-between; } .gallery__photo-preview { padding: 0; border: 0; border-radius: 0; background: none; } .gallery__photo-preview:hover, .gallery__photo-preview:focus { opacity: 0.7; } .gallery__photo-preview img { display: block; object-fit: cover; width: 100px; height: 100px; } .gallery__photo-preview--active img { outline: 5px solid red; outline-offset: -5px; } .pattern { background: url("gallery/leaves-pattern.png") 0 0 repeat; }

JavaScript

var photos = [ 'gallery/laptop-large.jpg', 'gallery/microphone-large.jpg', 'gallery/keyboard-large.jpg', 'gallery/signboard-large.jpg', 'gallery/tree-large.jpg' ]; var thumbnails = document.querySelectorAll('.gallery__photo-preview'); var fullPhoto = document.querySelector('.full-photo'); for (var i = 0; i < thumbnails.length; i++) { thumbnails[i].addEventListener('click', function () { fullPhoto.src = photos[i]; }); }

ObjetivosRealizado

Antes del ciclo, declara la función addThumbnailClickHandler con dos parámetros: thumbnail y photo.
Dentro de la función, añade un manejador de clic a thumbnail.
Dentro de ese manejador, muestra thumbnail en la consola y, en la línea siguiente, muestra photo.
Sustituye todo el código del cuerpo del ciclo por una llamada a addThumbnailClickHandler con los argumentos thumbnails[i] y photos[i].
Haz clic en dos miniaturas distintas.