An Image Change explainer

The aim of this puzzle: Add an event listener to a button that changes an image when the button is clicked.

Walkthrough of the solution:
Event listeners wait for a specific event, for example, click , and then run a callback function when that event occurs.

In this puzzle, you’ll add an event listener to button2 so it changes img.src when it’s clicked.

To complete the puzzle, add an event listener to button2. Set the 1st argument of the event listener to ’click’ and the 2nd argument to an arrow function. Then, inside the arrow function, set the src attribute of img to pic2. Now, when button2 is clicked, the arrow function will run and the src of the img will change, displaying a new image.

Sample code solution:
(Tap below to reveal)

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;

HTML Concepts:<img>, <button>
JavaScript Concepts: Event listener, Arrow Function, document.getElementById, Variables