Как я могу получить новое значение палитры цветов HTML при его изменении? - PullRequest
Новая
       21

Как я могу получить новое значение палитры цветов HTML при его изменении?

0 голосов
/ 13 июня 2018

Я занимаюсь разработкой веб-приложения, которому нужно изменить цвет HTML canvas на основе значений colorpicker.

У меня есть colorpicker в HTML, который мне нужно получать value при каждом обновлении.

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

В настоящее время этот код связан с colorpicker в моем файле javascript. 

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

Я действительно не уверен, как этого достичь.

Я пробовал другой вопрос обмена стека, но ни один из них не отвечал моим требованиям, поэтому я был бы очень признателен, если бы кто-нибудь показал мне, как этого можно достичь.

Ответы [ 2 ]

0 голосов
/ 13 июня 2018

Вам просто нужно обновить значение переменной backRGB при изменении значения colorpicker.

Для этого вам необходимо подключить обработчик к событию onchange вашего colorpicker: 

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);
}
<input type="color" value="#ff0800" id="color">
0 голосов
/ 13 июня 2018

Решение с использованием чистого javascript:

// прослушивание «события изменения», связанного с вашим вводом цвета 

document.getElementById("color").addEventListener("change", onChangeColor);

, которое срабатывает после изменения входного значения: 

function onChangeColor() {

   console.log(this.value); //this.value contains the hexadecimal value of your input
   //change your canvas color

}

для изменения цвета холста здесь

...