Могу ли я изменить вручную фактический отображаемый цвет DOM с родным JS?

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>

Возможно, это более общая c версия. Вы можете использовать атрибуты данных, если вы не хотите использовать внутренний HTML

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>  

Answer 2

Да, это работает, document.querySelector получит элемент. Свойство value изменяет значение input.

. Альтернативами для поиска элементов могут быть document.getElementById или document.getElementsByTagName.

.

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

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