我可以使用本地JS手动更改通过DOM实际显示的颜色吗？

Question

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

[我见过有人遇到过同样的问题，而StackOverflow用户的帮助就解决了，但是问题是我使用本机JS，而他正在使用jQuery库。

这是他的解决方法：

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

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

这里还有两个屏幕截图，所以您可以看到我想要做什么：

点击前

之后

Answer 1

喜欢吗？

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

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

Answer 2

应该是这个：

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

Answer 3

是的，可行，document.querySelector将获取元素。 value属性更改input

的值

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

<input type="color" id="test"/> 
<button id="click">click</button>