Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript jQuery Basics (2014) Creating a Simple Drawing Application Perform: Part 1

Ryan Sherry
Ryan Sherry
12,449 Points

Why does my code not work correctly for selecting different colors when using functions within functions?

I skipped ahead before he described how to use jquery to remove the "selected" class from sibling elements and add it to the one you are clicking on. I was able to get the following code to work:

function selectColor() { if ($(this).siblings().hasClass("selected")) { $(this).siblings().removeClass("selected"); } $(this).toggleClass("selected"); }

$(".controls li").click(selectColor);

However, when I break this up into separate functions then use a function within a function (the selectColor function below), it does not seem to work. Why is that?

function selectColor() { removeSelectedColor(); $(this).toggleClass("selected"); }

function removeSelectedColor() { if ($(this).siblings().hasClass("selected")) { $(this).siblings().removeClass("selected"); } }

$(".controls li").click(selectColor);

2 Answers

Hey Ryan,

Disregard that comment about posting a snapshot of your workspace because I see your problem. The this object is kind of tricky to get a handle on how it works. In your 2nd block of code, the this object is correctly gathered from the event handler. However, when you are calling removeSelectedColor(); it has no data to draw from. It is a totally separate function. So what you need to do is send the this object into the removeSelectedColor function:

function selectColor() { 
removeSelectedColor(this); 
$(this).toggleClass("selected"); 
}

function removeSelectedColor(el) { 
  if ($(el).siblings().hasClass("selected")) { 
    $(el).siblings().removeClass("selected"); 
  }
}

$(".controls li").click(selectColor);

You see, event handlers send certain data off to functions: one of those is a re-assignment of the object this to be the object that called it until the event is over. this, in other circumstances, refers to the window object, and if you call this before and after clicking, for example, it will both times be a reference to the window object. You need to send the current value of the this object off to removeSelectedColor like I did above. To get a feel for what I mean, just open up your web console and type in "this" and hit enter. Now, if everything else is correct, your code should work.

Ryan Sherry
Ryan Sherry
12,449 Points

Hi Marcus, thank you for your answer! I appreciate it.

Makes sense, I will probably keep the first code with the one function because it seems simpler.

I will use a workspace next time to make the code in my question easier to remember.

Oh, it is most definitely simpler. But, don't stop experimenting like you did! Experimentation leads to great things and I'm not just talking about experimenting in college. haha Happy coding!

Ryan Sherry
Ryan Sherry
12,449 Points

Haha! Thanks Marcus , I definitely won't stop. I appreciate your help. Happy coding to you as well!