You have completed the first (or, rather, last) item on the plan and picked up some JavaScript know-how along the way. Now you will move on to the next two items on the list: getting the image and the title from a thumbnail. For each of these, you will write a new function.

Add a function declaration in main.js for imageFromThumb. It will accept a single parameter, thumbnail, which is a reference to a thumbnail anchor element. It will retrieve and return the value of the data-image-url attribute.

...
function setDetails(imageUrl, titleText) {
  ...
}

function imageFromThumb(thumbnail) {
  'use strict';
  return thumbnail.getAttribute('data-image-url');
}

The getAttribute method does the opposite of the setAttribute method you used in the setDetails function. It only takes a single argument, the name of an attribute.

Unlike setDetails, the imageFromThumb function uses the return keyword. When you call a function that has a return statement, it gives you back a value. querySelector is an example of this. When you called it, it returned a value that you then assigned to a variable.

Save main.js and try out the following in the console, pressing Return between the lines.

var firstThumbnail = document.querySelector(THUMBNAIL_LINK_SELECTOR);
imageFromThumb(firstThumbnail);

The console reports that the value returned was the string "img/otter1.jpg", because imageFromThumb returns the data-image-url of the thumbnail.

Figure 6.20  Value returned from imageFromThumb

Note that any statements that come after a return statement will not be run. A return statement effectively stops a running function.

The next function to write is one that will accept a thumbnail element reference and return the title text.

Add a function declaration in main.js for titleFromThumb, with a thumbnail parameter. It will return the value of the data-image-title attribute.

...
function imageFromThumb(thumbnail) {
  ...
}

function titleFromThumb(thumbnail) {
  'use strict';
  return thumbnail.getAttribute('data-image-title');
}

Save main.js and try this function out in the console, too:

var firstThumbnail = document.querySelector(THUMBNAIL_LINK_SELECTOR);
titleFromThumb(firstThumbnail);

Figure 6.21  Value returned from titleFromThumb

The next function to write brings the three other functions together for convenience, so that you do not need to call them separately. It will accept a reference to a thumbnail element and then call setDetails, passing in the values from calling imageFromThumb and titleFromThumb.

Add setDetailsFromThumb in main.js.

...
function titleFromThumb(thumbnail) {
  ...
}

function setDetailsFromThumb(thumbnail) {
  'use strict';
  setDetails(imageFromThumb(thumbnail), titleFromThumb(thumbnail));
}

Notice that setDetails is being called with two arguments – and those arguments are function calls, too. How does this work?

Before setDetails is actually called, its arguments are reduced to their simplest values. First, imageFromThumb(thumbnail) runs and returns a value. Then, titleFromThumb(thumbnail) runs and returns a value. Finally, setDetails is called with the values returned by imageFromThumb(thumbnail) and titleFromThumb(thumbnail). Figure 6.22 shows this process.

Figure 6.22  Function calls as arguments

Save main.js. You have completed all the code for retrieving data-attribute values from thumbnails and using those values to update what is shown in the detail image and title.

Moving up from the low-level operations, the next thing to do is write code that will perform your data transfer from thumbnail to detail when the user clicks a thumbnail.