Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Rebekah Shaw
Rebekah Shaw
18,687 Points
Posted by Rebekah Shaw
Rebekah Shaw
18,687 Points

All images from flickr showing when button is clicked, no animal pictures appearing

I have gotten my code to work and it is the same code that Dave is using but the only problem I am having is when I click on a button i.e. Dogs, I get loads of random images rather than just images of dogs.

Here is my code

$(document).ready( function () {
  $('button').click( function () {
    $("button").removeClass("selected");
    $(this).addClass("selected");
    var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
    var animal = $(this).text();
 var flickrOptions = {
  tags: animal,  
  format: "json"
};
function displayPhotos(data) {
  var photoHTML = "<ul>";
  $.each( data.items, function (i, photo) {
    photoHTML += '<li class="grid-25 tablet-grid-50">';
     photoHTML += '<a href="' + photo.link + '" class="image">';
    photoHTML += '<img src= "'+ photo.media.m + ' "></a></li>';
  });
  photoHTML += '</ul>';
  $('#photos').html(photoHTML);
}
$.getJSON(flickerAPI, flickrOptions, displayPhotos);
  });                
 }); // end ready

3 Answers

Steven Parker
Steven Parker
231,007 Points
Steven Parker
Steven Parker
231,007 Points

The code in your workspace is different from the code shown above. This code establishes the handler using a conventional function, but the workspace code uses an "arrow" function.

One of the differences between them is that arrow functions do not establish a value for "this". And since the code uses $(this) to get the button's text, that fails in the workspace version.

Besides changing the function type, you can fix it by passing in the event object to the handler, and then substituting the object's "target" property value where you previously used "this".

Rebekah Shaw
Rebekah Shaw
18,687 Points
Rebekah Shaw
Rebekah Shaw
18,687 Points

sorry I started to play around with arrow functions to see if that would fix the problem but it didn't. Once I took the arrow functions out and went back to function that fixed the problem, i also noticed that using let instead of var was a problem as well. Thank you for your help.

Steven Parker
Steven Parker
231,007 Points
Steven Parker
Steven Parker
231,007 Points

You didn't show the HTML part of the code, so I made some up and it seems to work:

<button>Dogs</button>
<button>Cats</button>
<button>Kids</button>
<button>Ocean</button>

<div id="photos"></div>

So I'm wondering .. does your button display the text "Dogs" on it?

Rebekah Shaw
Rebekah Shaw
18,687 Points
Rebekah Shaw
Rebekah Shaw
18,687 Points

yes my buttons do display the correct words, but it's still not working

Steven Parker
Steven Parker
231,007 Points
Steven Parker
Steven Parker
231,007 Points

I pasted the code (along with my HTML) into a sandbox tool and it ran just fine. Maybe there's some other issue in your environment. Are you using a workspace? If so, you can make a snapshot of your workspace and post the link to it here.