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

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.

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.