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 jQuery Basics (2014) Creating a Simple Drawing Application Using on()

Gabi Udrescu
Gabi Udrescu
11,539 Points
Posted by Gabi Udrescu
Gabi Udrescu
11,539 Points

Getting null while trying to finish JQuery code challenge

I'm on the PHP Development track, one hour away of finishing it, but I'm stuck with a JQuery code challenge that seems very easy.

It asks me to get a the LI elements click-able even if they are added dinamically through JS.

Which I do with the following code sequence:

//When clicking on control list items
$(".controls ul").on("click", "li", function(){
  //Deselect sibling elements
  $(this).siblings().removeClass("selected");
  //Select clicked element
  $(this).addClass("selected");
  //cache current color
  color = $(this).css("background-color");
});

But while trying to validate my input, it says: Bummer! null

Although the preview renders the desired behavior. Any help is much appreciated!

1 Answer

Gabi Udrescu
Gabi Udrescu
11,539 Points
Gabi Udrescu
Gabi Udrescu
11,539 Points

I figured it out myself:

the CSS selector should have been selecting the controls class only while the LI element should have been selected through a parameter of the on() function.

the correct code that passed the validation is:

//When clicking on control list items
$(".controls").on("click", "li", function(){
  //Deselect sibling elements
  $(this).siblings().removeClass("selected");
  //Select clicked element
  $(this).addClass("selected");
  //cache current color
  color = $(this).css("background-color");
});

At this very moment, I don't know which is best: that the system told me a very basic error and left me think about the issue and find the solution the hard way or that the system should have returned a more specific error helping me to track down the mistake I did.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Gabi,

Just to let you know $(".controls ul") would work in practice it just wasn't exactly what the code challenge was looking for in this case.