admin管理员组

文章数量:1324829

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

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

  • javascript
  • html
Share Improve this question edited Jan 14, 2013 at 17:34 No Results Found 103k38 gold badges197 silver badges231 bronze badges asked Jan 14, 2013 at 17:03 Daniel VictorDaniel Victor 6692 gold badges7 silver badges11 bronze badges 3
  • 4 Look at the error console. – SLaks Commented Jan 14, 2013 at 17:30
  • 1 what is the function rgb()? ;) – epascarello Commented Jan 14, 2013 at 18:26
  • I just used like how it's used in HTML. :/ – Daniel Victor Commented Jan 14, 2013 at 19:30
Add a comment  | 

7 Answers 7

Reset to default 53

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().

Use quotes around the value

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

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/

You have no function called rgb(...)

I think you meant to do:

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

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

Setting a CSS property to any JavaScript variable requires the value to be passed inside quotation marks (as strings).

document.body.style.backgroundColor = 'red';

check out how we write red inside quotes, as it is a CSS property. Similarly, we write :

document.body.style.backgroundColor = 'rgb(x, y, z)';

This worked for me:

const red = 245;
const green = 128;
const blue = 56;
document.body.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;

本文标签： javascriptWhy doesn39t backgroundColorrgb(abc) workStack Overflow

版权声明：本文标题：javascript - Why doesn&#39;t backgroundColor=rgb(a,b,c) work? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1737293327a1971298.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。