问题:

<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??

回答1:

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:

回答2:

Use quotes around the value

document.body.style.backgroundColor="rgb(" + a + "," + b + "," + c + ")";

回答3:

rgb needs to be in quotation mark:

<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>

jsFiddle http://jsfiddle.net/pduQ6/

回答4:

You have no function called rgb(...)

I think you meant to do:

document.body.style.backgroundColor = "rgb(" + a + "," + b + "," + c + ");";

回答5:

The problem is that the color needs to be a string:

var a = parseInt(prompt("Enter R"),10); var b = parseInt(prompt("Enter G"),10); var c = parseInt(prompt("Enter B"),10); document.body.style.backgroundColor = "rgb(" + [a,b,c].join() + ")";

Demo

转载请标明出处:Why doesn't backgroundColor=rgb(a,b,c) work?

文章来源: Why doesn't backgroundColor=rgb(a,b,c) work?

标签

parseint

prompt

enter