Советы по созданию кода выбора цвета для определенной функции

Question

У меня есть код для выбора нескольких цветов, используя <button> для html. Есть ли способ превратить это в сборщик цветов? Я не знаю, как получить значение из набора цветов, который будет использоваться в функции javascript. Может кто-нибудь мне помочь? Вот коды, которые у меня есть прямо сейчас.

HTML

<span id="colors" > 

     <button class="black" id="#000000"> </button> 
     <button class="white" id = '#FFFFFF'> </button> 
     <button class="blue" id = '#0000FF'> </button> 
     <button class="red" id = '#FF0000'> </button> 
     <button class="yellow" id = '#FFFF00'> </button> 
     <button class="green" id = '#008000'> </button> 
     <button class="purple" id = '#800080'> </button> 

     <input type="hidden" id="color_value_form"> 

</span> 

и здесь функция в файле JavaScript.

$('#colors button').on('click', function(){ 
     tmp_ctx.strokeStyle = $(this).attr('id'); 
     tmp_ctx.fillStyle = tmp_ctx.strokeStyle; 
     console.log(tmp_ctx.strokeStyle); 

     drawBrush(); 
    }) 

Answer 1

Не уверен, что именно вы пытаетесь выполнить, но вот что-то, чтобы вас начать.

$('#colors button').on('click', function(){ 
 
\t document.body.style.background = $(this).data('color'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="colors"> 
 
\t <button class="black" data-color="#000000">black</button> 
 
\t <button class="white" data-color='#FFFFFF'>white </button> 
 
\t <button class="blue" data-color='#0000FF'>blue</button> 
 
\t <button class="red" data-color='#FF0000'>red</button> 
 
\t <button class="yellow" data-color='#FFFF00'>yellow </button> 
 
\t <button class="green" data-color='#008000'> green</button> 
 
\t <button class="purple" data-color='#800080'>purple </button> 
 
</div>

Answer 2

html5 имеет ColorPicker, а

<input id="html5colorpicker" type="color"> 

в ЯШ:

$("#html5colorpicker").value //is a string like "#000000"