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 JavaScript Loops, Arrays and Objects Simplify Repetitive Tasks with Loops The Refactor Challenge Solution

Explanation on '<div style="background-color:' + rgbColor + '"></div>';

Hi,

it's still not clear the syntax of this line:

'<div style="background-color:' + rgbColor + '"></div>';

I remember that when we open a single quote, the next one will close the piece of code, isn't it? So when we open the single quote, the code should close after background.color. The first piece of code should be this one:

<div style="background-color:

Is it right? Can we close the property background-color without the double quotes?

Can you explain me better how does it work this piece of code? I lost myself! Thanks

3 Answers

Tyler Morgan
Tyler Morgan
7,063 Points

You're correct that, in this example, there needs to be a double quote to close the background-color property. But it's not missing, it's just at the end of the concatenation. More accurately its the first character in the third string. The parenthesis isn't a part of the first string (or "piece of code") but is present later on after the entire line is combined, so its all good in the end after the computer inserts whatever rgbColor happens to be and converts it to a string.

Putting some underscores around it highlights where it is, although there shouldn't actually be any in the actual code.

e.g. '___"_____></div>'

So, Mary-Ann shows an end result example: '<div style="background-color: #ffffff "></div>'

This does actually have a closing tag (as does the original syntax provided) when you look at the end of "background-color: #ffffff"

Mary-Ann Burton
Mary-Ann Burton
15,834 Points

Hi Luca,

You are partly correct, the ' at the end of '<div style="background-color:' closes the quoted code, but the + rgbColor + is an example of concatenation. JavaScript is inserting the rgb color code, then closing the html tags with ' "></div> '; so you insert the color code into the website.

So the end result would be '<div style="background-color: #ffffff "></div>'; for example

I hope this was clear.

Thanks Mary-Ann,

I understand the concatenation but my trouble is still if we can close the background-property without the double quotes. As you know background property is within the double quotes but in this example we have only the opening one, before the single quotes closes. That I want to know is if we can leave the property open like in this example or not.

Thanks