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.
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);
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.
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.
13.59.197.213