JS - Setting Div background color using a variable

Question

Well basically, one of my mates was practicing JS and he had an idea of a test basic site. So I said we would have a race to complete it. We have both run in to an error at this point. We have created a color in JS. However when we need to output it does not work. I have this.

document.getElementById("outputColor").style.backgroundColor=currentColor;

Where current color is made via this

part1 = Math.floor(Math.random() * (255 - 0 + 1)) + 0;
part2 = Math.floor(Math.random() * (255 - 0 + 1)) + 0;
part3 = Math.floor(Math.random() * (255 - 0 + 1)) + 0;
currentColor = "\"rgb (" + part1 + ", " + part2 + ", " + part3 + ")\"";

Putting current color in "" would mean it's expecting the value of currentColor. Not the actual variable value.

Hope that makes sense. Is this possible, or are we barking up the wrong tree?

Thanks

Edit: It does have a css style assosiated with it already

#outputColor
{
    height: 100px;
    width: 100px;
    background-color: rgb(0,0,0);
}

Edit: Solved, solution is

currentColor = "rgb(" + part1 + ", " + part2 + ", " + part3 + ")";

Thank you all!

AndrewL64 · Accepted Answer · 2019-01-19 09:42:05Z

4

There are too much double-quotes, use this:

currentColor = "rgb(" + part1 + ", " + part2 + ", " + part3 + ")";

edited Jan 19, 2019 at 9:42

AndrewL64

16.4k8 gold badges51 silver badges87 bronze badges

answered Jun 16, 2012 at 22:35

Dr.Molle

117k16 gold badges200 silver badges206 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kyle93 Over a year ago

Thanks, that was almost it just had one to many spaces after rgb. Correct answer is currentColor = "rgb(" + part1 + ", " + part2 + ", " + part3 + ")"; Thanks :)

MARP · Accepted Answer · 2012-06-16 22:38:35Z

1

currentColor = "rgba(" + part1 + ", " + part2 + ", " + part3 + ",0)";

answered Jun 16, 2012 at 22:38

MARP

5811 gold badge12 silver badges19 bronze badges

Comments

The Alpha · Accepted Answer · 2012-06-16 22:39:05Z

1

currentColor = "rgb(" + part1 + ", " + part2 + ", " + part3 + ")"; // RGB

OR Using Hex format

currentColorHex="#"+(part1).toString(16)+(part2).toString(16)+(part3).toString(16);

DEMO.

answered Jun 16, 2012 at 22:39

The Alpha

147k30 gold badges294 silver badges313 bronze badges

1 Comment

Kyle93 Over a year ago

Thanks for the answer, however Dr.Molle beat you to it. I managed to get it from his. You are correct and thanks for your reply. +1'd

Collectives™ on Stack Overflow

JS - Setting Div background color using a variable

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related