如何将随机数发生器的结果值插入html输入值？（JavaScript）
我正在开发一个背景渐变生成器，它可以通过选择两个HTML颜色输入中的一个并手动选择颜色（然后在背景中实时显示）或单击“随机”按钮并生成两个随机rgb颜色来进行操作 问题是，单击“随机化”时，颜色输入字段的值在背景更改时保持不变。我想让它，使每个随机生成的rgb颜色的值，然后添加到输入框的内部html“值”，使框显示准确的两种颜色被选中。我搞不清楚这样做的逻辑 以下是颜色随机化器函数的JS（如果有帮助）：如何将随机数发生器的结果值插入html输入值？（JavaScript）,javascript,html,Javascript,Html,我正在开发一个背景渐变生成器，它可以通过选择两个HTML颜色输入中的一个并手动选择颜色（然后在背景中实时显示）或单击“随机”按钮并生成两个随机rgb颜色来进行操作 问题是，单击“随机化”时，颜色输入字段的值在背景更改时保持不变。我想让它，使每个随机生成的rgb颜色的值，然后添加到输入框的内部html“值”，使框显示准确的两种颜色被选中。我搞不清楚这样做的逻辑 以下是颜色随机化器函数的JS（如果有帮助）： function randomRGB() { var rgbValues = []
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 + ';';
}
<!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>
梯度背景
背景发生器
随机化
当前CSS背景
请让我知道，如果有什么我可以澄清，我肯定是一个初学者，当谈到JS，我可能没有解释它的最佳方式 考虑到您的
输入容器下，正如我在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 + ';';
}
编辑：
由于必须将其插入type=“color”
输入，该输入仅接受Hex
格式的颜色，因此我们还必须使用regex
将RGB
格式转换为Hex
格式，如下所示：
function getHexFromRGB(x){
return '#' + x.match(/\d+/g).map(y = z => ((+z < 16)?'0':'') + (+z).toString(16)).join('');
}
因此，您只需使用这些rbg
字符串，并将它们转换为十六进制格式，以便将它们分配给每个输入的值
函数randomRGB（）{
var rgbvalue=[]；
对于（变量i=0；i<3；i++）{
rgbValues.push（Math.floor（Math.random（）*256））；
}
返回'rgb（'+rgb值[0]+'、'+rgb值[1]+'、'+rgb值[2]+'）；
}
函数setRandom（）{
const firstRndRGB=randomRGB（）；
const secondRndRGB=randomRGB（）；
const inputs=document.querySelectorAll（'.inputs'）；
输入[0]。值=toHEX（firstRndRGB）；
输入[1]。值=toHEX（secondRndRGB）；
document.body.style.background='线性渐变（向右，'+firstRndRGB+'，'+secondRndRGB+'）'；
//css.textContent=body.style.background+'；'；
}
函数toHEX（rgbString）{
rgbString=rgbString.split（“”[1]。split（“”）[0]；
rgbString=rgbString.split（“，”）；
rgbString=rgbString.map（x=>{
x=parseInt（x）.toString（16）；
返回（x.length==1）？“0”+x:x；
});
rgbString=“#”+rgbString.join（“”）；
返回rgbString；
}
setRandom（）；
document.getElementById（'randomize'）。addEventListener（'click'，（）=>{
setRandom（）
});
背景发生器
随机化
当前CSS背景
表示输入type=“color”采用小写十六进制表示法。在视图中，必须打印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;
}
函数randomColor（）{
var rgb=[]；
var十六进制=[]；
对于（变量i=0；i<3；i++）{
var randomColorPart=Math.floor（Math.random（）*256）；
var randomColorPartHEX=randomColorPart.toString（16）；
if（随机颜色零件十六进制长度<2）{
randomColorPartHEX='0'+randomColorPartHEX；
}
rgb.push（随机彩色部分）；
六角推（六角）；
}
返回{
'rgb'：'rgb（'+rgb.join（）+'），
“hex”：“#”+hex.join（“”），
}
}
函数setRandom（）{
var randomColor1=randomColor（）；
var randomColor2=randomColor（）；
var bgLinearGradient='线性渐变（向右，'+randomColor1.rgb+'，'+randomColor2.rgb+'）'；
body.style.background=bgLinearGradient；
css.textContent=bgLinearGradient+'；'；
color1.value=randomColor1.hex；
color2.value=randomColor2.hex；
}
你也可以分享你的html吗？@King11添加了html
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;
}