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

回答

相關問題