如何将随机化器的结果值插入html输入值？(JavaScript)

Question

我正在开发一个背景渐变生成器，它可以通过选择两个HTML颜色输入中的一个并手动选择颜色(然后在背景中实时显示)，或者通过单击“随机化”按钮并生成两种随机显示的rgb颜色来操作。

Github repository here.

问题是，当您单击“随机化”时，颜色输入字段的值保持不变，而背景发生变化。我想让每个随机生成的rgb颜色的值被添加到输入框的内部html "value“上，这样框就可以准确地显示所选的两种颜色。我很难弄清楚这样做的逻辑。

如果有帮助，下面是颜色随机化器函数的JS：

function randomRGB() {
    var rgbValues = [];
    for(var i = 0; i < 3; i++) {
        rgbValues.push(Math.floor(Math.random() * 256));
    }
    return 'rgb(' + rgbValues[0] + ',' + rgbValues[1] + ',' + rgbValues[2] + ')';
}

function setRandom() {
    body.style.background = 'linear-gradient(to right, ' + randomRGB() + ', ' + randomRGB() + ')';
    css.textContent = body.style.background + ';';
}

下面是HTML：

<!doctype html>
<html lang="en">
<head>
    <title>Gradient Background</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body id = "gradient">
    <div class="container">
        <h1>Background Generator</h1>
        <div class="inputs">
            <input class = "color1" type="color" name="color1" value="#B5DDFF">
            <input class = "color2" type="color" name="color2" value="#D998FF" id=""><br>
        </div>
        <button class="random">Randomize</button>
        <h2>Current CSS Background</h2>
        <h3></h3>
    </div>



    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>
</html>

如果有什么我可以澄清的，请告诉我，当涉及到JS时，我绝对是一个初学者，我可能没有以最好的方式解释它。

Answer 1

考虑到您的inputs位于.inputs容器下，正如我在github存储库中看到的那样：

function setRandom() {
    const firstRndRGB = randomRGB();
    const secondRndRGB = randomRGB();
    const inputs = document.getElementsByClassName('inputs');

    inputs[0].value = firstRndRGB;
    inputs[1].value = secondRndRGB;
    body.style.background = 'linear-gradient(to right, ' + firstRndRGB + ', ' + secondRndRGB + ')';
    css.textContent = body.style.background + ';';
}

编辑：

因为它必须插入到只接受Hex格式颜色的type="color"输入中，所以我们还必须使用如下所示的regex将RGB格式转换为Hex格式：

function getHexFromRGB(x){
    return '#' + x.match(/\d+/g).map(y = z => ((+z < 16)?'0':'') + (+z).toString(16)).join('');
}

然后就这么做

inputs[0].value = getHexFromRGB(firstRndRGB);
inputs[1].value = getHexFromRGB(secondRndRGB);

Answer 2

因此，您所需要做的就是使用这些rbg字符串并将其转换为十六进制格式，这样就可以将它们赋给每个输入值

​

function randomRGB() {
   var rgbValues = [];
    for(var i = 0; i < 3; i++) {
        rgbValues.push(Math.floor(Math.random() * 256));
    }
    return 'rgb(' + rgbValues[0] + ',' + rgbValues[1] + ',' + rgbValues[2] + ')';
}

function setRandom() {
    const firstRndRGB = randomRGB();
    const secondRndRGB = randomRGB();
   
    const inputs = document.querySelectorAll('.inputs input');

    inputs[0].value = toHEX(firstRndRGB);
    inputs[1].value = toHEX(secondRndRGB);
    document.body.style.background = 'linear-gradient(to right, ' + firstRndRGB + ', ' + secondRndRGB + ')';
    //css.textContent = body.style.background + ';'; 
}

function toHEX(rgbString){
  rgbString = rgbString.split("(")[1].split(")")[0];
  rgbString = rgbString.split(",");
  rgbString = rgbString.map(x => {             
    x = parseInt(x).toString(16);      
    return (x.length==1) ? "0"+x : x;
  });
  
  rgbString = "#"+rgbString.join("");
  return rgbString;
}

setRandom();
document.getElementById('randomize').addEventListener('click', ()=>{
  setRandom()
});

<body id = "gradient">
	<div class="container">
		<h1>Background Generator</h1>
		<div class="inputs">
			<input class = "color1" type="color" name="color1">
			<input class = "color2" type="color" name="color2" id=""><br>
		</div>
		<button id='randomize' class="random">Randomize</button>
		<h2>Current CSS Background</h2>
		<h3></h3>
	</div>
</body>

​

Answer 3

MDN表示输入颜色“type=”采用小写十六进制表示法的值。在视图中，必须打印RGB值。用randomColor()重命名randomRGB()并返回它们。

function randomColor() {
    var rgb = [];
    var hex = [];
    for (var i = 0; i < 3; i++) {
        var randomColorPart = Math.floor(Math.random() * 256);
        var randomColorPartHEX = randomColorPart.toString(16);
        if (randomColorPartHEX.length < 2) {
            randomColorPartHEX = '0' + randomColorPartHEX;
        }
        rgb.push(randomColorPart);
        hex.push(randomColorPartHEX);
    }
    return {
        'rgb': 'rgb(' + rgb.join() + ')',
        'hex': '#' + hex.join(''),
    }
}

function setRandom() {
    var randomColor1 = randomColor();
    var randomColor2 = randomColor();
    var bgLinearGradient = 'linear-gradient(to right, ' + randomColor1.rgb + ', ' + randomColor2.rgb + ')';
    body.style.background = bgLinearGradient;
    css.textContent = bgLinearGradient+ ';';
    color1.value = randomColor1.hex;
    color2.value = randomColor2.hex;
}