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 Perform: Part 2

James Barrett
James Barrett
13,253 Points
Posted by James Barrett
James Barrett
13,253 Points

Why are we calling the changeColor() function after the click event?

Hi there.

In this code snippet:

$("#revealColorSelect").click(function(){
//   changeColor();
  $("#colorSelect").toggle();
});

Why are we calling the changeColor() function? I have tested it without doing this and everything still works fine.

Thanks, James.

Juliette Tworsey
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points
Juliette Tworsey
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points

Hi James,

I'm posting all of the app.js code here for perspective:

//Problem: No user interaction causes no change to application
//Solution: When user interacts cause changes appropriately
var color = $(".selected").css("background-color");

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

//When new color is pressed
$("#revealColorSelect").click(function(){
  //Show color select or hide the color select
  changeColor();
  $("#colorSelect");
});

//update the new color span
function changeColor() {
  var r = $("#red").val();
  var g = $("#green").val();
  var b = $("#blue").val();
  $("#newColor").css("background-color", "rgb(" + r + "," + g +", " + b + ")");
}

//When color sliders change
$("input[type=range]").change(changeColor);

//When add color is pressed
  //Append the color to the controls ul
  //Select the new color

//On mouse events on the canvas
  //Draw lines

Without having re-watched this video for some time now, the changeColor() function is grabbing and storing the (color) values that are chosen by the user via the sliders/inputs. You need to then call this function within your click function event in order to reveal/see the changes that you are then going to toggle.

I hope that helps!

Cheers:-)

3 Answers

Youssef Girgeis
seal-mask
.a{fill-rule:evenodd;}techdegree
Youssef Girgeis
iOS Development Techdegree Student 10,996 Points
Youssef Girgeis
.a{fill-rule:evenodd;}techdegree
Youssef Girgeis
iOS Development Techdegree Student 10,996 Points

Hi James,

Yes you are right, we are calling the function changeColor() inside the first click event to set an initial rgb value. if you try to comment that line out you wont see the black color when you click the new color button, since you didnt initialize the rgb value.

James Barrett
James Barrett
13,253 Points
James Barrett
James Barrett
13,253 Points

Hi Juliette,

Thanks for your answer. I am still a little confused as to why we have to call the changeColor() function. It seems as if the purpose of that anonymous function is to toggle the #colorSelect and nothing else?

Thanks, James. :)

Juliette Tworsey
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points
Juliette Tworsey
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points

Hi James,

As far as I can see (without having watched the accompanying video/tutorial in months) the changeColor() function is only storing the values of the rgb values. There is no event attached to that function. In order to see the input new rgb values you have to either call it (the changeColor function) or place it inside of an event handler in order to see/call the new values.

Does that make sense?

Cheers:-)

James Barrett
James Barrett
13,253 Points
James Barrett
James Barrett
13,253 Points

Hi Juliette,

I think I understand now; was just overthinking it. From what I see... It seems as if it just sets an initital rgb value for the user to view.

Please correct me if I am wrong. :P Thanks, James.

Juliette Tworsey
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points
Juliette Tworsey
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points

"It seems as if it just sets an initital rgb value for the user to view."

What sets the value, changeColor() or the click event anonymous function?

One sets the value via user input and the other displays the results on click:-)