javascript - 如何使用 onInput 获取两个值并从中创建渐变？

Question

我正在尝试通过获取用户的颜色输入来实时调整渐变。每当我调整一个值时，我都会收到错误 - 它表明未给出另一个值。

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

<label>Background Gradient: <input type="color" onInput="btnGradient(this, input2);"></label>

<label>Background Gradient: <input type="color" onInput="btnGradient(input1, this);"></label>

关于我如何执行此操作有什么想法吗？谢谢。

Answer 1

试试这个。HTML:

<label>Background Gradient: <input id="gradient1" type="color" onInput="btnGradient();"></label>
<label>Background Gradient: <input id="gradient2" type="color" onInput="btnGradient();"></label> 

JavaScript:

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

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

UPD:看起来您还没有初始化变量input1，input2。因此您没有指向这些字段的链接。