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

Hello, guys! Could you please help me understand the following methods:

In jQuery basics course with Andrew Chalkley – Creating a Simple Drawing Application - platform 2 video – how to show color select or hide the color select, he shows the following:

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

I get this logic very well: when the button of New Color is pressed, the .toggle() method simply displays or hides the matched element which is in this case colorSelect.

Then he changes the background color of the newColor span. by adding .css("background-color", "value") method.

My questions are:

  1. Why does he put var r = $("#red").val(), var g = $("#green").val() and var b = $("#blue").val() inside colorChange function?

  2. When he wants to change the background color of NewColor, why does he use the rgb as a value of background color?

  3. Why does he call colorChange(); function inside $("#revealColorSelect").click() function?

  4. I don't understand the logic behind this method: $("input[type=range]").change(colorChange);

  5. Why when I move the range of color from 0 to 255 the color changes - I would like to know the logic behind.

Sorry but I am really confused and I'm the beginner. Shouldn’t there be some other course to start with prior to this one to understand the whole picture?

Thanks a lot for your help! Much appreciated!

This is a link of the mentioned video: https://teamtreehouse.com/library/jquery-basics/creating-a-simple-drawing-application/perform-part-2

2 Answers

Steven Parker
Steven Parker
221,293 Points

Other course to start with prior to this one:

These courses are listed as prerequisites for the course you are taking (in the Teacher's Notes of the first video);

Thanks Steven Parker for these links but I have already seen all of these videos...

Steven Parker
Steven Parker
221,293 Points

I'll try to clear things up.

    1. Why does he put var r = $("#red").val(), var g = $("#green").val() and var b = $("#blue").val() inside colorChange function?

Those variables represent the position of the color choosing sliders (range inputs). This code loads each variable with the value of the current slider position.

    2. When he wants to change the background color of NewColor, why does he use the rgb as a value of background color?

The rgb function converts the separate values for each color component into a combined color, which can then be displayed in the background of the sample area (the newColor span).

    3. Why does he call colorChange(); function inside $("#revealColorSelect").click() function?

This makes sure that the color being shown in the sample area is the correct one for the current slider positions.

    4. I don't understand the logic behind this method: $("input[type=range]").change(colorChange);

This establishes the function to be called as the event handler every time one of the range sliders is moved. This keeps the sample area color matched to what has been chosen by the sliders. For a fun modification you might try substituting this line:

$("input[type=range]").on("input", colorChange);

This will cause the sample area color to be updated while you move the slider instead of after you finish moving it.

    5. Why when I move the range of color from 0 to 255 the color changes - I would like to know the logic behind.

As I said, the event handler function is called any time you move one of the sliders. The handler function takes the values of the sliders, converts them into a color, and sets that color as the background of the sample area.