我怎样才能让这个 function 改变我的输入值？

Question

我刚刚进入 JavaScript 并且我试图制作一个通过按钮随机化的背景颜色生成器。 按下此按钮时，两个输入（颜色 1 和颜色 2）都会获得一个随机值，并反映在身体的风格上。

这是我的代码：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);

谢谢;）

Answer 1

你有两个 colors 需要随机化，所以你需要调用generateRandomColor两次，而不是一次。 您还需要将结果值设置为两个输入并再次调用setGradient 。

 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>

我怎样才能让这个 function 改变我的输入值？

问题描述

1 个解决方案

解决方案1
0 2022-08-13 21:54:49

我怎样才能让这个 function 改变我的输入值？

问题描述

1 个解决方案

解决方案1 0 2022-08-13 21:54:49

解决方案1
0 2022-08-13 21:54:49