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

希望有人可以帮助我在这里，我正在写一些代码，以使用3个输入框代表RGB的文本区域应用不同的颜色，但我似乎不能看到值应用。这是我玩的代码。使用RGB输入框应用颜色通过JS

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>

任何帮助将不胜感激。

来源

2016-02-23 Tom Arctica Alvey

您需要实际调用了'RGB（）'函数，并提供它的一些价值观。目前，你只是给backgroundColour属性一个函数的引用，这个函数最多不会做任何事情，最坏的情况是抛出一个错误。 –

我认为这基本上是你试图做什么：

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/

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

我希望帮助

来源

2016-02-23 12:15:01 Belakorr

你在做rgb(this.value)，只给出函数1的值来处理。从函数中删除参数，并在运行中获取rgb值。

来源

2016-02-23 12:05:03

试试这个：

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+')'; 
 
}

<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);"> 
 
      </td> 
 
      <td> 
 
       G 
 
       <input type=text size=3 maxlength=3 name="g" value="0" onBlur="rgb(this);"> 
 
      </td> 
 
      <td>  
 
       B 
 
       <input type=text size=3 maxlength=3 name="b" value="0" onBlur="rgb(this);"> 
 
      </td>

来源

2016-02-23 12:36:11 Munawir

谢谢你花时间帮助我:) –

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

回答

相关问题