Javascript 当HTML colorpicker的新值发生更改时，如何获取该值？

我正在开发一个web应用程序，需要根据

colorpicker

的值更改HTML

canvas

的颜色

我有一个HTML格式的

colorpocker

，每次更新时我都需要从中获取

值

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

我真的不知道如何才能做到这一点

我尝试过其他堆栈交换问题，但没有一个真正满足我的要求，因此如果有人能告诉我如何实现这一点，我将不胜感激。
纯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

}

要更改画布颜色检查，只需在更改
颜色选择器
值时更新
backRGB
变量的值即可

要实现这一点，您需要将处理程序附加到
颜色选择器的
onchange
事件：

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

演示：

这是一个工作演示：


var backRGB=document.getElementById（“color”）.value；
document.getElementById（“color”）.onchange=function（）{
backRGB=此值；
console.log（backRGB）；
}
除了已经给出的答案之外，我们还可以附加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;
});

希望这对很多用户都有帮助。
您是在输入标签的onchange事件中调用此功能的吗？如果是的话，你的错误是什么。哦，我很抱歉。。。“未捕获的TypeError:无法读取我声明varRGBOk的行上的null属性'value'，您是否将
id=“color”
给了您的颜色选择器？你在加载文档后运行代码吗？我有两个匹配的ID，所以这应该不是问题。如果通过文档加载，您的意思是在我的代码中声明backRGB变量，它是一个全局变量。不，我的意思是您需要在页面加载后运行代码，您能用您的整个代码做一个标记吗？所以你可以重现这个问题？！我对代码做了一点修改。。。它在某种程度上起作用。。。它更新颜色一两次，然后给我同样的错误。我不能给你发消息，因为我没有足够的声誉，但是如果可能的话，你可以给我发消息，这样我就可以给你JSFIDLE链接（我不希望它是公开的，因为它是一个私有代码……感谢你使用addEventListener（）的纯javascript解决方案。这真的很有帮助
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;
});