如何从 html 输入类型=颜色更新颜色

Question

我正在实现一个允许用户与画布交互的接口，当按下具有先前定义颜色的图形时，我能够通过图形颜色值更新输入颜色值，但输入按钮上的颜色不会改变。

换句话说，这里的问题是，当输入 [type=color].value 更新时，输入颜色(默认为黑色(不会根据其值而更改。

我一直在检查更新的输入值并将其与选定的图形颜色值进行比较，它们匹配，但我仍然不知道为什么输入颜色没有改变。

这是 html 代码：

<dt>Other</dt>
                  <dd>Filled:
                  <input type="checkbox" style="float:inherit; cursor:pointer" id="Filled"></dd>
                  <dd>Color:
                  <input type="color" style="float:inherit; cursor:pointer"  id="Color"></dd>

这是我尝试更改输入颜色和值的方式：

document.getElementById("Filled").checked = mySel.filled;
document.getElementById("Color").value = mySel.fill;

其中 mySel 是所选形状。

谢谢大家

Answer 1

这是如何更新颜色类型输入的值。请注意，您需要做的就是更新其 value 属性，颜色会自动更改。

var colorInput = document.getElementById("testInput");
setInterval( function() {
  if( colorInput.value == "#00ff00") {
    colorInput.value = "#ff0000";
  }
  else {
    colorInput.value = "#00ff00";
  }
}, 1000);

<input id="testInput" type="color"/>