An Image Change es-419 Explainer

Explicador de Un cambio de imagen

Objetivo de este acertijo: Agregar una escucha de eventos a un botón que cambie una imagen cuando se haga clic en él.

Tutorial de la solución:
Las escuchas de eventos esperan un evento específico, por ejemplo, click, y luego ejecutan una función de devolución de llamada cuando ocurre ese evento.

En este acertijo, agregarás una escucha de eventos a button2 , para que cambie img.src cuando se haga clic en ella.

Para completar el acertijo, agrega una escucha de eventos a button2. Define el primer argumento de la escucha de eventos como ’click’ y el segundo argumento a una función de flecha. Luego, dentro de la función de flecha, define el atributo src de img como pic2. Ahora, cuando se hace clic en button2, la función de flecha se ejecutará y el src de img cambiará y mostrará una nueva imagen.

Solución del código de ejemplo:
(Pulsa a continuación para revelar)

let pic1 = '../../static/images/poolPup.jpg';
let pic2 = '../../static/images/giraffe.jpg';
let img = document.getElementById('pic');
let button1 = document.getElementById('button1');
let button2 = document.getElementById('button2');

button1.addEventListener('click', () => {
    img.src = pic1;
});

button2.addEventListener('click', () => {
    img.src = pic2;
});

Conceptos de HTML:<img>, <button>
Conceptos de JavaScript: escucha de eventos, función de flecha, document.getElementById, variables