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

Becky Castle
Becky Castle
15,294 Points

Why did Andrew use the "+" symbols when filling in the rgb values?

Here's the code we were working on in the video:

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

1) Why did we need to surround "r", "g", and "b" variables with "+" signs?

2) Also, why was it ok -- even necessary -- to use double quotes inside of double quotes when listing those rgb values? Up until this point, I thought we were supposed to switch to single quotes if you're needing to use quotes inside of double quotes. In fact, when I tried this code with single quotes inside of double quotes, it wouldn't work.

5 Answers

Andrew Shook
Andrew Shook
31,709 Points

Becky, Andrew uses the "+" because in javascript the is the operator used to concatenate, or add things together to make a string. In this case he's adding together "rgb("+ r +","+ g +","+ b +")" to make a string that looks like "rgb(225, 34, 154)". When the browser's JS interpreter reads this code, "rgb("+ r +","+ g +","+ b +")", it will replace the r, g, and b with the values of those variables.

Now the reason he is using double quotes throughout is a stylistic choice. It is necessary to end a double quote with a double quote, or a single quote with a single quote, but you can concatenate a single quoted single with a double quotes string.

Becky Castle
Becky Castle
15,294 Points

Andrew, thanks for your help! About those quotation marks, though-- I'm still confused. I know it doesn't matter if you choose to use single or double quotes throughout your code. But isn't it taboo to use double quotes <strong>inside</strong> of double quotes (or single, inside of single, for that matter)? In this, for example:

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

...see how he surrounded the "r, g & b" with double quotes, and then he used double quotes immediately after to encompass the "rgb()"? Maybe it was just a glitch in my browser, but when I tried the "correct" way of using single & double quotes, it wouldn't work. (I know it shouldn't matter if you use single quotes inside of doubles, or doubles inside of singles. But why do we have to "break the rule" and use the same type of quotation marks, in this case?)

Andrew Shook
Andrew Shook
31,709 Points

You are correct in saying you should not use double quotes inside double quotes, but that isn't what Andrew is doing here. In the above code, Andrew is piecing together 6 different thing to make one string. I'll try to illustrate with some code:

var rgbOpen = "rgb(";
var rgbClose = ")";
var comma    = ",";
var r = "230";
var g = "24";
var b = "187"

//this is what the JS interpreter reads from the JS file
console.log( rgbOpen + r + comma + g + comma + b + rgbClose):
//this will print out "rgb(230,24,187)" in the console log

//this it what the JS interpreter translates the variables to
console.log(  "rgb(" + "230" + "," + "24" + "," + "187" + ")" );
//this will print out "rgb(230,24,187)" in the console log

//this is the final translation before logging the info to the console
console.log(  "rgb(230,24,187)" );
//this will print out "rgb(230,24,187)" in the console log

In the above code I should the 6 different part of the string that Andrew is putting together (I took the liberty of replacing the dynamic r, g, and b values with static ones). I hope this helps to clear things up for you.

Becky Castle
Becky Castle
15,294 Points

Ah I see... It's like one of those optical illusions, lol. I get it now. Thanks so much for your patience in explaining it to me!

Remember that when you use the + operator on two strings, the second string is appended onto the first.

console.log( "Becky" + " " + "Castle" );
// => "Becky Castle"

When we call the .val() method on a jQuery selector, we will get back whatever the element has in its value attribute. So, if we have this HTML:

<input type="text" id="red" value="30" placeholder="red" name="red" />
<input type="text" id="blue" value="60" placeholder="blue" name="blue" />
<input type="text" id="green" value="90" placeholder="green" name="green" />

Then this should be our JavaScript:

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

console.log( r );
// => "30"

console.log( b );
// => "60"

console.log( g );
// => "90"

When we call the .css() method on an element, we're changing the inline styles of that element to whatever we pass it. So, using the r, g, and b variables we declared above, we'll set a new background:

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

We're simply concatenating a lot of strings together and passing them to .css() to change background-color to (in this case) rgb(30, 60, 90).

Hope this helps!

Pavle Lucic
Pavle Lucic
10,801 Points

Hi Becky Castle ,

If you look in jquery api documentation you will find for this method .css( propertyName, value ) where

.css( propertyName, value )
**propertyName** <-------
Type: String <------
A CSS property name.
-------------------------------------------------
**value** <------
Type: String or Number <------
A value to set for the property.

Property

Background-color is our propery and it must be a String.

Value

Our value is rgb and it must be String or Number. Well it must be a String , because it have letters, brackets, commas.

Example// change color to some random color using rgb value.

$(something).css("background-color", "rgb(123,123,123)"); Rgb is a string

Example2

var r = "255";
var g = "100";
var b = "0";

"rgb("+ r +","+ g +","+ b +")".

Using string concatenation you will create exact value for background color "rgb(255,100,0)";

Becky Castle
Becky Castle
15,294 Points

Guys, thanks so much for your quick responses! It makes a little more sense to me. But now I'm wondering why I have to concatenate the "r", "g", and "b", -- why aren't the commas enough?

Andrew Shook
Andrew Shook
31,709 Points

You have to concatenate the r, g, and b into the string because they are variables. In JS you can't directly input variables into a string without concatenating them because the interpreter has no way of telling the difference between a variable name and a word inside the string. This is because JS doesn't have a special character for variables. You have to use "var" to declare a variable, but not to use the variable. For example:

var name = "Andrew";

console.log("Hello, my name is " + name);
// prints "Hello, my name is Andrew" in the console.

This code works because the JS interpreter knows that outside of single or double quotes the word "name" actually means "Andrew". If this wasn't the case then above code would product "Hello, my Andrew is Andrew", since the word "name" inside "Hello, my name is" would also be replace with "Andrew".

Robert Achu
Robert Achu
17,155 Points

The concatenation on this challenge led me to this forum - for any viewers after me, viewing the string set with added white-space may help.

"rgb(" + r + "," + g + "," + b + ")"

Adding the spacing makes it much easier to understand this string grouping. Also recognize the variables r, g & b do not require quotations.

~Thanks for the clarification guys!