如何使用onInput获取两个颜色值创建渐变？实时调整遇未传值错误

嘿，我一眼就看出你踩的坑啦！你遇到的报错是因为调用btnGradient时没正确传入另一个输入框的引用，导致其中一个参数变成了undefined，自然没法读取它的value属性～

问题根源 #

你的HTML里的两个颜色输入框没有设置id，直接用input1、input2当参数的话，浏览器根本找不到对应的元素，所以其中一个参数会是undefined，函数执行时就会抛出“无法读取undefined的value”的错误。

解决方案 #

我们只需要给输入框加上id，再确保每次调用函数时都能拿到两个输入框的实例就行，这里有两种简洁的写法：

写法1：优化参数传递逻辑

先给两个输入框加上唯一id：

<label>渐变颜色1: <input type="color" id="color1" onInput="btnGradient(document.getElementById('color1'), document.getElementById('color2'));"></label>
<label>渐变颜色2: <input type="color" id="color2" onInput="btnGradient(document.getElementById('color1'), document.getElementById('color2'));"></label>

JS函数保持原有逻辑即可：

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

这样每次触发onInput时，都会明确传入两个输入框的DOM实例，再也不会出现参数缺失的情况。

写法2：让函数主动获取输入框（更简洁）

这种方式不用在事件里传参，函数自己去获取两个输入框的值，代码更干净：

<label>渐变颜色1: <input type="color" id="color1" onInput="btnGradient();"></label>
<label>渐变颜色2: <input type="color" id="color2" onInput="btnGradient();"></label>

function btnGradient(){
  const colorInput1 = document.getElementById('color1');
  const colorInput2 = document.getElementById('color2');
  btn.style.background = `linear-gradient(to right, ${colorInput1.value}, ${colorInput2.value})`;
}

不管哪个输入框变化，函数都会同时获取两个颜色值，完美解决参数缺失的问题～

内容的提问来源于stack exchange，提问作者TysonH00t