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

I’m curious as to what this line of code does on this page:
let img = document.getElementById('pic');

In the HTML, theres an image element with an id of 'pic', like this:

<img id='pic' src='../../static/images/sportsDog.jpg' alt='sports dog'>

This line of JS:

let img = document.getElementById('pic')

grabs that image element and stores in a variable. The event listeners add functions for the buttons to run when they are clicked that change the src attribute of the image element.

Hope this helps!
Ben

Thanks, I think I’m comprehending. So there is an initial image 'pic' in the html. And then two more images referenced in the javascript, which are swapped into the place of 'pic' when we click buttton 1 and 2.

Close! There’s just one image element in this puzzle, and it’s created in the HTML and given an id of 'pic' so we have an easy way of accessing it in the JavaScript. In this puzzle we’re just changing the src attribute of this image so that it shows a different picture when a button is clicked.

This line of JavaScript grabs the image element and stores it in a variable:

let img = document.getElementById('pic')

These 2 lines store strings that tell the computer where some .jpg files are stored. These aren’t the images themselves, just “paths” to the file locations.

let pic1 = '../../static/images/poolPup.jpg';
let pic2 = '../../static/images/giraffe.jpg';

Then, there are two event listeners, one for button1 and another for button2.

These event listeners say “When this button is clicked, change the src attribute of the image element to the string stored in pic1 or pic2.”

Hope this clears things up.

Thanks, I think I already had the idea. But it is also good to be able to express clearly how things are happening as you did, in terms of img id, file paths, etc.

For the record, I’ve been able to progress OK with html training elsewhere, but hit a brick wall with css and js. Which is why I’m here! LOL

help

Hey there, the puzzle thinks you haven’t added .addEventListener() to button2.

Try looking closely at that line and see if you can spot why that is.

Hope this helps!
Ben

Try this:

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;
});