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

Howie Yeo
PLUS
Howie Yeo
Courses Plus Student 3,639 Points

why are we adding so many + operator in $(“#newColor”).css(“background-color”, "rgb("+r+","+g+","+b+")"

 function changeColor() {
  var r = $("#red").val();
  var g = $("#green").val();
  var b = $("#blue").val();

  $("#newColor").css("background-color", "rgb(" + r + "," + g +", " + b + ")");
}

Can anyone explain why the above is rgb(value) is written in such a way that there is so many + sign? Why not : rgb("r", "g", "b") since its already separated by a COMMA ?

Nicholas Elliott
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nicholas Elliott
Full Stack JavaScript Techdegree Graduate 19,539 Points

Instead of viewing the code with the quotations around the 2 plus signs and the letter 'r' like this: " + r + "

View the quotations around the 'rgb' and paranthesis like this: "rgb("

With that in mind, realize that the strings:

"rgb("

","

", "

")"

are being concatenated with the variables:

r

g

b

to form: "rgb(" + r + "," + g +", " + b + ")"

Hope this helps because I had the same thought when first seeing our instructor type it out.

1 Answer

Erik McClintock
Erik McClintock
45,783 Points

Howie,

The reason for the concatenation is that you are inserting variables into your property declaration. We need to break out of the string, then tell the code to concatenate a value, then concatenate back into the string, rinse and repeat until we've inserted all of our values. The + character is just how we happen to achieve this in JavaScript. To string together multiple things in one value, we concatenate!

Erik

Corbin Balzan
Corbin Balzan
11,751 Points

Are the + characters breaking out of the string? I am confused on how you break out, then concatenate the value, then concatenate back into the string.

Erik McClintock
Erik McClintock
45,783 Points

Corbin,

The different pairs of quotation marks are what break you in and out of the string, and the plus signs concatenate those strings together with whatever you place in between. You are able to break in and out and concatenate as many things together into the string as you like before you place the closing semi-colon to end the statement.

Erik

Corbin Balzan
Corbin Balzan
11,751 Points

Erik,

Thank you for the help! I understood the concatenation and breaking out of the strings I was just wondering why the + sign would be on both sides of the variable. Now as I have taken a second look at the code I see why they are there. Thank you again for helping point it out to me!

Corbin