HTML colorpicker 发生变化时如何获取新值？

Question

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

我有一个HTML 格式的文件，每次更新时都colorpicker需要获取它。value

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

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

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

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

我尝试过其他堆栈交换问题，但没有一个真正满足我的要求，因此如果有人可以向我展示如何实现这一点，我将非常感激。

Answer 1

除了已经给出的答案之外，我们还可以附加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;
});

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

Answer 2

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

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

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

演示：

这是一个工作演示：

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);
}