Javascript 从颜色选择器复制附加的h3标记_Javascript_Html

Javascript 从颜色选择器复制附加的h3标记

javascript html

Javascript 从颜色选择器复制附加的h3标记,javascript,html,Javascript,Html,我对javascript的世界还不熟悉，并且正在学习一门在线课程。其中一项任务是构建背景渐变工具。我已经成功地创建了这个工具，并输入了一个“幸运”随机生成器。但是，我希望能够使用javascript将渐变复制到剪贴板我知道，为了将select（）与execCommand（copy）一起使用，它需要复制一个输入，然而，我正在绞尽脑汁研究如何让它工作由于我是新来的，我将非常感谢任何帮助我在这方面的错误。我的代码如下： HTML <html> <head> <

我对javascript的世界还不熟悉，并且正在学习一门在线课程。其中一项任务是构建背景渐变工具。我已经成功地创建了这个工具，并输入了一个“幸运”随机生成器。但是，我希望能够使用javascript将渐变复制到剪贴板

我知道，为了将select（）与execCommand（copy）一起使用，它需要复制一个输入，然而，我正在绞尽脑汁研究如何让它工作

由于我是新来的，我将非常感谢任何帮助我在这方面的错误。我的代码如下：

HTML

<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Gradient Background</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>

</head>
<body id="gradient">
    <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>
    <h3></h3>
    <h4><button id="random">Get Lucky!</button></h4>
    <h4><button id="copy">Copy!</button></h4>
<script src='main.js'></script>
</body>
</html>

var color1 = document.querySelector(".color1");
var color2 = document.querySelector(".color2");
var body = document.getElementById("gradient");
var getLucky = document.getElementById("random");
var copyButton = document.getElementById("copy")

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

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

}

function genColors(){
    document.querySelectorAll("input").forEach(input=>input.value = "#" + Math.floor(Math.random()*16777215).toString(16));

    setGradient();
}

function copy(){
    var copyText = document.querySelector(".color1").value;
    copyText.select();
    document.execCommand("copy")
}
document.getElementById("copy").addEventListener("click",copy);

color1.addEventListener("input", setGradient);
color2.addEventListener("input", setGradient);
getLucky.addEventListener("click", genColors);
copyButton.addEventListener("click", copyGradient);