当 HTML colorpicker 发生变化时，如何获取它的新值？答案

【问题标题】：How can I get the new value of HTML colorpicker when it changes?当 HTML colorpicker 发生变化时，如何获取它的新值？
【发布时间】：2018-11-23 00:18:32
【问题描述】：

我正在开发一个网络应用程序，它需要根据 colorpicker 的值更改 HTML canvas 的颜色。

我在 HTML 中有一个 colorpicker，每次更新时我都需要获取 value。

<input type="color" value="#ff0800" id="color">

目前，这是与我的 javascript 文件中的 colorpicker 关联的代码。

var backRGB = document.getElementById("color").value;

我真的不确定如何实现这一点。

我尝试了其他堆栈交换问题，但没有一个真正符合我的要求，所以如果有人能告诉我如何实现这一点，我将不胜感激。

【问题讨论】：

你是在输入标签的 onchange 事件上调用这个吗？如果是，您遇到的错误是什么。

标签： javascript html colors html5-canvas onchange

【解决方案1】：

当colorpicker的值改变时，你只需要更新backRGB变量的值。

为此，您需要将处理程序附加到您的colorpicker 的onchange 事件：

document.getElementById("color").onchange = function() {
  backRGB = this.value;
}

演示：

这是一个工作演示：

var backRGB = document.getElementById("color").value;

document.getElementById("color").onchange = function() {
  backRGB = this.value;
  console.log(backRGB);
}

&lt;input type="color" value="#ff0800" id="color"&gt;

【讨论】：

哦，我很抱歉...“未捕获的类型错误：无法读取 null 的属性'值'”在我声明 varRGB 的行上
好的，你给你的颜色选择器id= "color"了吗？您是否在文档加载后运行代码？
我的两个 ID 都匹配，所以这应该不是问题。如果通过文档加载您的意思是在我的代码中声明作为全局变量的 backRGB 变量..
不，我的意思是你需要在页面加载后运行代码，你能用你的整个代码创建一个fiddle吗？所以你可以重现这个问题？！
我已经稍微更改了代码......它有点工作......它更新颜色一次或两次，然后给我同样的错误。我不能给你发消息，因为我没有足够的声誉，但如果可能的话，你能给我发消息，这样我就可以给你 jsfiddle 链接（我不希望它公开，因为它是私人代码......跨度>

【解决方案2】：

除了已经给出的答案，我们还可以附加 oninput 事件处理程序而不是 onchange 事件。这是我们可以监控来自用户的颜色选择器事件的另一种方式。

此事件类似于 onchange 事件。不同之处在于 oninput 事件在元素的值发生更改后立即发生，而 onchange 事件发生在元素失去焦点时，在内容发生更改后。另一个区别是 onchange 事件也适用于元素。这是一个例子：

const backRGB = document.querySelector(".backRCB");
const color = document.querySelector(".color");

color.addEventListener("input",(event)=>{
   backRGB.style.backgroundColor = color.value;
   // You can also do it with the event object as event object holds the value of the current color
   //  backRGB.style.backgroundColor = event.target.value;
});

希望对许多用户有所帮助。

【讨论】：

是的！这正是我想要的。
@Akshaykn 我很高兴能够帮助 Mate。上帝保佑你:)

【解决方案3】：

纯javascript解决方案：

//收听颜色输入附加的“更改事件”

document.getElementById("color").addEventListener("change", onChangeColor);

输入值改变后触发的函数：

function onChangeColor() {

   console.log(this.value); //this.value contains the hexadecimal value of your input
   //change your canvas color

}

更改画布颜色检查here

【讨论】：

感谢您提供使用 addEventListener() 的纯 JavaScript 解决方案。这真的很有帮助