Menu
<html>
<head>
<title> Colors </title>
</head>
<body>
<script type="text/javascript">
var a = parseInt(prompt("Enter R"));
var b = parseInt(prompt("Enter G"));
var c = parseInt(prompt("Enter B"));
document.body.style.backgroundColor=rgb(a,b,c);
</script>
</body>
</html>
Why doesn't the background color change according to the RGB values? What have I done wrong??
222
First, choose the color you want changed in the browser. Then move the red, green, and blue sliders until you get the desired color. There are a few additional buttons to help you do this. The white button makes the color white (red = blue = green = 1.0) and the black color makes it black (red = blue = green = 0.0).
rgb(red, green, blue) Each parameter (red, green, and blue) defines the intensity of the color with a value between 0 and 255. This means that there are 256 x 256 x 256 = 16777216 possible colors!
CSS rgb() Function The rgb() function define colors using the Red-green-blue (RGB) model. An RGB color value is specified with: rgb(red, green, blue). Each parameter defines the intensity of that color and can be an integer between 0 and 255 or a percentage value (from 0% to 100%).
To set the background color in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <body> tag, with the CSS property background-color. HTML5 do not support the <body> tag bgcolor attribute, so the CSS style is used to add background color.
You need to use quotes:
document.body.style.backgroundColor = 'rgb(' + a + ',' + b + ',' + c + ')';
JS Fiddle demo.
Or:
document.body.style.backgroundColor = 'rgb(' + [a,b,c].join(',') + ')';
JS Fiddle demo.
Unquoted the JavaScript is passing the variables, as arguments, a,b and c to an undefined function called rgb(). As you're setting a CSS property you need to pass a string, hence the requirement of quoting.
Oh, and also you're using parseInt() which doesn't require a radix to be passed in, but it's better (and easier to avoid problems) if you do (the radix being the expected number-base):
var a = parseInt(prompt("Enter R"), 10) || 255,
b = parseInt(prompt("Enter G"), 10) || 255,
c = parseInt(prompt("Enter B"), 10) || 255;
JS Fiddle demo (In the demo I use 105 just so it's clear the default is being used if the cancel button is used).
And if someone hits 'cancel' on the prompt, you might want to supply a default argument to ensure that an actual colour-value is passed, since cancel otherwise, I think, evaluates to false (I'm assuming you'd prefer 255, but obviously adjust to taste).
You could also, of course, simply define a function:
function rgb(r,g,b) {
return 'rgb(' + [(r||0),(g||0),(b||0)].join(',') + ')';
}
var a = parseInt(prompt("Enter R"), 10),
b = parseInt(prompt("Enter G"), 10),
c = parseInt(prompt("Enter B"), 10);
document.body.style.backgroundColor = rgb(a,b,c);
JS Fiddle demo
And this approach has the (perhaps specious) benefit of allowing a custom default value to be used:
function rgb(r,g,b, def) {
def = parseInt(def, 10) || 0;
return 'rgb(' + [(r||def),(g||def),(b||def)].join(',') + ')';
}
var a = parseInt(prompt("Enter R"), 10),
b = parseInt(prompt("Enter G"), 10),
c = parseInt(prompt("Enter B"), 10);
document.body.style.backgroundColor = rgb(a,b,c,40);
JS Fiddle demo
References:
|| (logical OR) operator.Array.join().Element.style.parseInt().
82
Use quotes around the value
document.body.style.backgroundColor="rgb(" + a + "," + b + "," + c + ")";
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
