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 trialBecky Castle
15,294 PointsWhy 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
31,709 PointsBecky, 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.
Ryan Duchene
Courses Plus Student 46,022 PointsRemember 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
10,801 PointsHi 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
15,294 PointsGuys, 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
31,709 PointsYou 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
17,155 PointsThe 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!
Becky Castle
15,294 PointsBecky Castle
15,294 PointsAndrew, 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
31,709 PointsAndrew Shook
31,709 PointsYou 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:
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
15,294 PointsBecky Castle
15,294 PointsAh 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!