How can I make this function change my input's value?-CodePudding

I am just getting into JavaScript and I was trying to make a background color generator which is randomized by a button. When this button is pressed, both inputs (color1 & color2) get a random value and it's reflected on the body's style.

This is my code: HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Gradient Background</title>
</head>
<body id="gradient">
    <div >
        <h1>Background Generator</h1>
        <input  id="color1" type="color" name="color1" value="#ff0000">
        <input  id="color2" type="color" name="color2" value="#ffff00">

        <h2>Current CSS Background</h2>
        <h3></h3>
        <button id="button" >Randomize</button>
    </div>

    <script src="script.js"></script>
</body>
</html>

JavaScript:

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

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

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

color1.addEventListener("input", setGradient);
color2.addEventListener("input", setGradient);


inputColor1.value = generateRandomColor().value;
inputColor2.value = generateRandomColor().value;

function generateRandomColor(){
    let maxVal = 0xFFFFFF; // 16777215
    let randomNumber = Math.random() * maxVal; 
    randomNumber = Math.floor(randomNumber);
    randomNumber = randomNumber.toString(16);
    let randColor = randomNumber.padStart(6, 0);   
    return `#${randColor.toUpperCase()}`
}
// console.log(generateRandomColor()); 

button.addEventListener("click", generateRandomColor);

Thanks ;)

CodePudding user response：

You have two colors you need to randomize, so you need to call generateRandomColor twice, not once. You also need to set the resulting values to both inputs and call setGradient again.

const css = document.querySelector("h3");
const color1 = document.querySelector(".color1");
const color2 = document.querySelector(".color2");
const body = document.getElementById("gradient");
const button = document.getElementById("button");
const inputColor1 = document.getElementById("color1");
const inputColor2 = document.getElementById("color2");

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

  css.textContent = document.body.style.background   ";";
}
setGradient();

color1.addEventListener("input", setGradient);
color2.addEventListener("input", setGradient);
function generateRandomColor() {
  const maxVal = 0xFFFFFF; // 16777215
  const randomNumber = Math.floor(Math.random() * maxVal).toString(16);
  const randColor = randomNumber.padStart(6, 0);
  return `#${randColor.toUpperCase()}`
}
button.addEventListener("click", () => {
  inputColor1.value = generateRandomColor();
  inputColor2.value = generateRandomColor();
  setGradient();
});

<div >
  <h1>Background Generator</h1>
  <input  id="color1" type="color" name="color1" value="#ff0000">
  <input  id="color2" type="color" name="color2" value="#ffff00">

  <h2>Current CSS Background</h2>
  <h3></h3>
  <button id="button" >Randomize</button>
</div>