javascript - 我可以手动更改吗DOM与本机JS的实际可显示颜色？

Question

我正在开发一个渐变生成器，并且有一个随机化按钮，可以从两种随机颜色创建一个新的渐变。问题是随机函数绕过并自行生成。我想为输入分配新的颜色值，以便用户看到刚刚生成的“随机化”按钮的颜色，并根据需要进行更改。

我见过有人遇到同样的问题，StackOverflow 用户的帮助解决了，但问题是我使用的是原生 JS，而他使用的是 jQuery 库。

这是他的解决方案：

$("#click").click(function () {
    $("#test").val("#ff66ff");
});

但我需要一个不使用任何库的解决方案。只需提供一行代码，即可更改输入的实际颜色。

这是另外两个屏幕截图，因此您可以看到我想要做什么：

点击前

后

标签： javascriptjqueryhtmldominput

Answer 1

像这样？

document.getElementById("click").addEventListener("click", function () {
    document.getElementById("test").value = "#ff66ff"
});

<input id="test" type="color"/>&nbsp;<button id="click">Click</button>

也许这个更通用的版本。如果不想使用innerHTML，可以使用数据属性

document.getElementById("container").addEventListener("click", function (e) {
  let tgt = e.target;
  if (tgt.tagName==="BUTTON") { 
    tgt.previousElementSibling.value = tgt.innerHTML;
  }  
});

<div id="container">
  <input type="color"/>&nbsp;<button class="click">#ffaaff</button><br/>
  <input type="color"/>&nbsp;<button class="click">#ffffaa</button><br/>
  <input type="color"/>&nbsp;<button class="click">#66ffff</button><br/>
</div>