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

对于javascript，我知道它会以

开头

function changeBackground(){

Answer 1

试试这个（请参阅代码注释以获得解释）：

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/

Javascript初学者

3 个答案: