Javascript初学者

Question

我试图让输入的rgb值改变背景颜色。我已经写了html部分。

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(){ 

Answer 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; 

Answer 2

这是一个工作的JS小提琴。 用途

document.forms.RGB.elements

和

document.forms.RGB.style.backgroundColor

https://jsfiddle.net/xy12aten/

有意离开代码湿，所以它更容易阅读。

Answer 3

这应该有助于让你去

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/