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 AJAX Basics (retiring) AJAX and APIs Adding jQuery

Posted by Gabriel Moreta
Gabriel Moreta
7,546 Points

Doesnt work code in flickr.js

I am writing piece of code to use button actions, but it is not work

$(document).ready(function () { $('button').click(function () { $('button').removeClass("selected"); $(this).addClass("selected"); }); // end button.click }); // end ready

and this is what I have into index.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>AJAX Flickr Photo Feeder</title> <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>> <script src="js/flickr.js"></script> </head> <body> <div class="grid-container centered"> <div class="grid-100"> <div class="contained"> <div class="grid-100"> <div class="heading"> <h1>Flickr Photo Feeder</h1> <p>Choose which kind of animal you'd like to return photos of...</p> </div> <ul class="filter-select"> <li><button>Dog</button></li> <li><button>Cat</button></li> <li><button>Moose</button></li> </ul> </div>

    <div id="photos">

    </div>
  </div>
</div>

</div> </body> </html>

2 Answers

Mindy Sandilands
Mindy Sandilands
15,743 Points
Mindy Sandilands
Mindy Sandilands
15,743 Points

Gabriel, If I am understanding your question correctly you are unable to change the background color of the button once clicked with the jquery code. Here are a couple things to try.

1) Have you made sure there is a class "selected" in the css file that changes the background color? (.selected {background-color: darkgrey;} I added this and it worked for me.

2) Not sure if you have added the script file to your index file which may be an issue if the file is not being loaded. You can check this by checking the developer console and see if it is not finding your .js file.

Hope this helps, Mindy

aamir asif
aamir asif
6,125 Points
aamir asif
aamir asif
6,125 Points

Mindy, How to check if the console is not loading over JS file? Aamir

John Sawiris
John Sawiris
4,510 Points
John Sawiris
John Sawiris
4,510 Points

Hey there, change the src attribute in your <script> from sr="js/flickr.js" to src="../js/flikr.js". That's going to grab the file from the parent directory of the js file.