2016-03-02 226 views
-4

我試圖讓輸入的rgb值改變背景顏色。我已經寫了html部分。Javascript初學者

HTML:

Red Value<input name="red" type="text"> 
Green Value<input name="green" type="text"> 
Blue Value<input name="blue" type="text"> 
<input name="submit" type="button" value="Submit" onclick="changeBackground(); 

因爲我知道它將開始與

function changeBackground(){ 

回答

1

試試這個(見解釋代碼註釋)的javascript

function changeBackground() { 
    // get values of all input boxes 
    // getElementsByTagName returns array, you need just first element 
    var red = document.getElementsByName('red')[0].value; 
    var green = document.getElementsByName('green')[0].value; 
    var blue = document.getElementsByName('blue')[0].value; 

    // create css rgb color value (e.g. rgb(255, 255, 255)) 
    var color = 'rgb(' + red + ', ' + green + ', ' + blue + ')'; 

    // set background color of body 
    document.body.style.backgroundColor = color; 
} 

要使它與文本的背景顏色一起工作你需要改變最後一行。它可能看起來像:

document.getElementById('id_of_my_textarea').style.backgroundColor = color; 
+1

繼承人的jsfiddle了。當您發佈我的確切答案時,您就完成了。 https://jsfiddle.net/ke736x8o/ – AtheistP3ace

1

這是一個工作的JS小提琴。 用途

document.forms.RGB.elements

document.forms.RGB.style.backgroundColor

https://jsfiddle.net/xy12aten/

有意離開代碼溼,所以它更容易閱讀。

+0

忘記了您想要驗證。這裏是更新的小提琴。只需用條件語句包裝你分配背景色的部分即可。 if(redVal <256 && redVal> -1 && greenVal <256 && greenVal> -1 && blueVal <256 && blueVal> -1){...} https://jsfiddle.net/xy12aten/1/ – Observer

0

這應該有助於讓你去

HTML

<form name="RGB"> 
    <p>Red Value<input name="red" value="0" min="0" max="255" required type="number"></p> 
    <p>Green Value<input name="green" value="0" min="0" max="255" required type="number"></p> 
    <p>Blue Value<input name="blue" value="0" min="0" max="255" required type="number"></p> 
    <input name="submit" type="submit" value="Submit"> 
</form> 

JS

var form = document.forms.RGB, 
elem = form.elements; 

form.onsubmit = function(event){ 
    event.preventDefault() 
    var red = elem.red.value, 
     green = elem.green.value, 
     blue = elem.blue.value; 


    alert("The color = ("+red+","+green+","+blue+")"); 
    return true; 
} 

例如:https://jsfiddle.net/z3hzt8kf/