Javascript 如何使用onInput获取两个值并由此创建渐变？

我试图通过用户的颜色输入实时调整渐变。每当我调整一个值时，我都会得到一个错误-它表示没有给出另一个值

函数btnGradient（输入1、输入2）{
btn.style.background=“线性渐变（向右，“+input1.value+”，“+input2.value+”）；”
背景渐变：
背景渐变：
试试这个。
HTML:

UPD：看起来您还没有初始化变量input1，input2。因此，您没有指向这些字段的链接。
另一种方法是：


const btn=document.getElementById（'btn'）；
document.querySelectorAll（'#color1，#color2'）.forEach（i=>{
i、 addEventListener（'change'，（）=>btn.style.background=`线性渐变（向右，${document.getElementById（'color1'）.value}，${document.getElementById（'color2'）.value}）`）；
}，false）
背景渐变：
背景梯度：
发送
我看到错误：
input1未定义
和/或
input2未定义
。您在哪里定义它们以便将它们传递到
btnGradient（）
？什么是
input2
和
input1
？似乎是
btnGradient（）
中的一个额外的
}
。也可能有助于解释错误所在以及如何解决。@showdev是的，没有注意到额外的括号。谢谢
<label>Background Gradient: <input id="gradient1" type="color" onInput="btnGradient();"></label>
<label>Background Gradient: <input id="gradient2" type="color" onInput="btnGradient();"></label> 

var input1 = document.getElementById("gradient1");
var input2 = document.getElementById("gradient2");

function btnGradient() {
    btn.style.background = "linear-gradient(to right," + input1.value + ", " + input2.value + ")";
}