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

Question

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 class="container">
        <h1>Background Generator</h1>
        <input class="color1" id="color1" type="color" name="color1" value="#ff0000">
        <input class="color2" id="color2" type="color" name="color2" value="#ffff00">

        <h2>Current CSS Background</h2>
        <h3></h3>
        <button id="button" class="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;)

Answer 1

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 class="container"> <h1>Background Generator</h1> <input class="color1" id="color1" type="color" name="color1" value="#ff0000"> <input class="color2" id="color2" type="color" name="color2" value="#ffff00"> <h2>Current CSS Background</h2> <h3></h3> <button id="button" class="button">Randomize</button> </div>

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

Question

1 answers

solution1
0 2022-08-13 21:54:49

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

Question

1 answers

solution1 0 2022-08-13 21:54:49

solution1
0 2022-08-13 21:54:49