Conseils pour créer un code sélecteur de couleur pour une certaine fonction

Question

J'ai un code pour choisir quelques couleurs en utilisant <button> pour le format html. Y at-il un moyen de transformer cela en sélecteur de couleur? Je ne sais pas comment obtenir la valeur du sélecteur de couleur à utiliser dans une fonction javascript. Quelqu'un peut-il m'aider? Voici les codes que j'ai en ce moment.

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> 

et est la fonction ici dans le fichier 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

Vous ne savez pas exactement ce que vous essayez d'accomplir, mais voici quelque chose pour commencer.

$('#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 a colorpicker ainsi

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

dans js:

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