使用RGB输入框通过JS应用颜色

时间:2016-02-23 11:57:13

标签: javascript jquery input colors textarea

希望有人可以在这里帮助我,我正在编写一些代码,使用3个表示RGB的输入框将不同颜色应用于文本区域,但我似乎无法获得要应用的值。这是我正在玩的代码。

function rgb(r, g, b) {
    return "rgb("+r+","+g+","+b+")";
} 
document.getElementById("id1").style.backgroundColor = rgb;
<table>
    <tbody>
        <tr>
            <td colspan="5">
                <textarea id="id1" cols="50" rows="10"></textarea>
                <!-- RGB value boxes !-->
            </td>
            <td>
                R
                <input type=text size=3 maxlength=3 name="r" value="0" onBlur="rgb(this.value);">
            </td>
            <td>
                G
                <input type=text size=3 maxlength=3 name="g" value="0" onBlur="rgb(this.value);">
            </td>
            <td>    
                B
                <input type=text size=3 maxlength=3 name="b" value="0" onBlur="rgb(this.value);">
            </td>

非常感谢任何帮助。

3 个答案:

答案 0 :(得分:2)

我认为这基本上是你尝试做的事情:

function rgb() {
  document.getElementById("id1").style.backgroundColor =
  "rgb("+document.getElementById("red").value+","
  +document.getElementById("green").value+","
  +document.getElementById("blue").value+")";
}
<table>
    <tbody>
        <tr>
            <td colspan="5">
                <textarea id="id1" cols="50" rows="10"></textarea>
                <!-- RGB value boxes !-->
            </td>
            <td>
                R
                <input id="red" type=text size=3 maxlength=3 name="r" value="0" onBlur="rgb()">
            </td>
            <td>
                G
                <input id="green" type=text size=3 maxlength=3 name="g" value="0" onBlur="rgb()">
            </td>
            <td>    
                B
                <input id="blue" type=text size=3 maxlength=3 name="b" value="0" onBlur="rgb()">
          </td>
      </tr>
  </tbody>
</table>

这是有效的JSFiddle: https://jsfiddle.net/n74dxarn/

它不能为你工作的原因是因为你在javascript代码的末尾没有任何参数地调用rgb函数,并且当onBlur被激活时你只用一个参数调用该函数。

我希望有帮助

答案 1 :(得分:0)

你正在做rgb(this.value),它只给出了函数1值。从函数中删除参数,并在运行中获取其中的rgb值。

答案 2 :(得分:0)

试试这个:

&#13;
&#13;
(A + H + (B + (C + D - E)) = (A + H + X)
(A + H + (B + (C + D - E) - F) - (G + H - I)) = (A + H + X - X)
&#13;
var r=0;
var g=0;
var b=0;
function rgb(elem) {
  var name = elem.name;
  var val = elem.value;
  window[name] = val;
  document.getElementById("id1").style.backgroundColor = 'rgb('+r+','+g+','+b+')';
}
&#13;
&#13;
&#13;