发表新帖
发表新帖

Why doesn't backgroundColor=rgb(a,b,c) work?

前端 未结
关注
5 2104
情书的邮戳
情书的邮戳 2021-02-18 21:28 

    
         Colors
相关标签:
5条回答
  • 轻奢々
    2021-02-18 21:51

    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().
    0 讨论(0)
  • 梦谈多话
    2021-02-18 21:56

    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/

    0 讨论(0)
  • 没有蜡笔的小新
    2021-02-18 21:56

    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

    0 讨论(0)
  • 既然无缘
    2021-02-18 22:00

    You have no function called rgb(...)

    I think you meant to do:

    document.body.style.backgroundColor = "rgb(" + a + "," + b + "," + c + ");";
    0 讨论(0)
  • 广开言路
    2021-02-18 22:08

    Use quotes around the value

    document.body.style.backgroundColor="rgb(" + a + "," + b + "," + c + ")";
    0 讨论(0)
 看不清?
提交回复
热议问题