Gold challenge and related questions

Frontend Web Development: The Big Nerd Ranch Guide Chapter 6: Handling Events with JavaScript
1

I have a few questions now after attempting the gold challenge.

First of all, why did we change the href attribute in the anchor tags? We go on to prevent the default behavior and we add that data in the data-image-url attribute?

For the extra challenge, the only way I could think of to reset the data-image-url values was to use the image tag’s src values. So, if that was the purpose, then it was good that have the url information twice (once for the anchor tag, and once for the anchor tag’s image tag). Here are the two functions I built to reset the thumbs that way:

function resetThumbURL(thumb) {
  'use strict'
  // get thumb's image
  var image = thumb.querySelector(".thumbnail-image");
  // get image's src
  var source = image.getAttribute('src');

  thumb.setAttribute('data-image-url', source);
} // end resetThumbURL(thumb)

function resetAllThumbURLs() {
  'use strict'
  var thumbnails = getThumbnailsArray();
  thumbnails.forEach(resetThumbURL);
} // end resetALLThumbURLs()

This works, but I feel like perhaps I need to add other data- values to the html. Notice that I am using querySelector with the class name .thumbnail-image and also using getAttribute with 'src'. Should a more robust solution add other data-values to avoid these issues?

2

Hey @ballgeier,

Great questions!

In response to your first one: that’s a good observation. You’re totally right. Since we’re calling preventDefault in the handler function, the href attribute will have no effect when we click the anchor tag,

Though not specifically mentioned in the book, we do this as a front-end development best practice. Just in case a user has JavaScript disabled in their browser, the anchor tags still do what they’re supposed to – that is, clicking them shows the user the detail image.

Admittedly, this won’t be the case with Ottergram, since you (and maybe a couple of your friends) will be seeing it (and it’s very unlikely that any of you have disabled JavaScript). But, as much as possible, front-end developers need to provide as much fallback behavior so that the user can access the data they want, even when things don’t go as planned.

As for your second question: I like your instincts!
Yes, it would be very good to use an additional data attribute. Using class selectors in your JavaScript is not recommended. (What would happen if you needed to update the styles and changed the class names?)

But, even without that change, your solution is very clear.

-Chris