Estoy haciendo un ejercicio en el que creo un generador de degradado de fondo. Pongo colores en las entradas y crea un degradado de izquierda a derecha usando los dos colores. Funciona bien hasta ahora, pero ahora tengo un botón que genera aleatoriamente un color RGB, pero no sé cómo aplicarlo al degradado de fondo. Sé que el botón funciona porque tengo console.log'd y escupe dos colores rgb separados.
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" onload="setGradient()"> <h1>Background Generator</h1> <input class="color1" type="color" name="color1" value="#00ff00"> <input class="color2" 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>Nota: es posible que desee repetir el segundo color en caso de que obtenga el mismo valor
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" onload="setGradient()"> <h1>Background Generator</h1> <input class="color1" type="color" name="color1" value="#00ff00"> <input class="color2" 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>