Random Color Generator and how to apply it to my existing Gradient-CodePudding

I am doing an exercise where I create a background gradient generator. I put colors in the inputs and it creates a gradient from left to right using the two colors. It works fine so far but now I have a button that randomly generates an RGB color but I can't figure out how to apply it to the background gradient. I know the button works because I have console.log'd it and it spits out two separate rgb colors.

var css = document.querySelector("h3");
var color1 = document.querySelector(".color1");
var color2 = document.querySelector(".color2");
var body = document.getElementById("gradient");
var button1 = document.querySelector(".button1");

function setGradient() {
  body.style.background =
    "linear-gradient(to right, "  
    color1.value  
    ", "  
    color2.value  
    ")";

  css.textContent = body.style.background   ";";
}

function randomColorGenerator() {
  var color1 = "rgb"   "("   (Math.floor(Math.random() * 255)  
    ", "  
    Math.floor(Math.random() * 255)  
    ", "  
    Math.floor(Math.random() * 255)  
    ")"   ";");

  var color2 = "rgb"   "("   (Math.floor(Math.random() * 255)  
    ", "  
    Math.floor(Math.random() * 255)  
    ", "  
    Math.floor(Math.random() * 255)  
    ")"   ";");
}

color1.addEventListener("input", setGradient);

color2.addEventListener("input", setGradient);

button1.addEventListener("click", randomColorGenerator);

<body id="gradient" onl oad="setGradient()">
  <h1>Background Generator</h1>
  <input  type="color" name="color1" value="#00ff00">
  <input  type="color" name="color2" value="#ff0000">
  <h2>Current CSS Background</h2>
  <button class='button1'>Random Color</button>
  <h3></h3>
  <script type="text/javascript" src="script.js"></script>

</body>

CodePudding user response：

convert to hex
do not reuse the color1/color2 variables
set the color before converting

Note: You many want to loop the second color in case you get the same value

const rgbToHex = rgb => '#'   (rgb.match(/[0-9|.] /g).map((x, i) => i === 3 ? parseInt(255 * parseFloat(x)).toString(16) : parseInt(x).toString(16)).join('')).padStart(2, '0').toUpperCase();


var css = document.querySelector("h3");
var color1 = document.querySelector(".color1");
var color2 = document.querySelector(".color2");
var body = document.getElementById("gradient");
var button1 = document.querySelector(".button1");

function setGradient() {
  body.style.background =
    "linear-gradient(to right, "  
    color1.value  
    ", "  
    color2.value  
    ")";

  css.textContent = body.style.background   ";";
}

function randomColorGenerator() {
  var col1 = "rgb"   "("   (Math.floor(Math.random() * 255)  
    ", "  
    Math.floor(Math.random() * 255)  
    ", "  
    Math.floor(Math.random() * 255)  
    ")"   ";");

  var col2 = "rgb"   "("   (Math.floor(Math.random() * 255)  
    ", "  
    Math.floor(Math.random() * 255)  
    ", "  
    Math.floor(Math.random() * 255)  
    ")"   ";");
    console.log(col1)
    color1.value=rgbToHex(col1)
    color2.value=rgbToHex(col2)
    console.log(color1.value,color2.value)
    setGradient()
}

color1.addEventListener("input", setGradient);

color2.addEventListener("input", setGradient);

button1.addEventListener("click", randomColorGenerator);

<body id="gradient" onl oad="setGradient()">
  <h1>Background Generator</h1>
  <input  type="color" name="color1" value="#00ff00">
  <input  type="color" name="color2" value="#ff0000">
  <h2>Current CSS Background</h2>
  <button class='button1'>Random Color</button>
  <h3></h3>
  <script type="text/javascript" src="script.js"></script>

</body>