javascript - how to change the text(selected) color using jquery in spectrum colorpicker -

i new web development, have problem regarding spectrum colorpicker, using spectrum colorpicker in project, working when used background not working when i'm using text, when pick color spectrum colorpicker, color of text changes initial color not updating same initialise in script. problem in script. please me in solving problem. here following code.

<label>textcolor</label> 

<input type='color' id="full"/>

<script type="text/javascript"> $(document).ready(function(){ $("#full").spectrum({     showinput: true,     classname: "full-spectrum",     showinitial: true,     showpalette: true,     showselectionpalette: true,     localstoragekey: "full",     maxpalettesize: 10,     preferredformat: "hex",     move: function (full) {      },     show: function (full) {      },     beforeshow: function (full) {      },     hide: function (full) {      },     change: function(full) {     $("#full").on('change',function(){ format('forecolor' ,$("#full").val());  });      },     palette: [         ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)",         "rgb(204, 204, 204)", "rgb(217, 217, 217)","rgb(255, 255, 255)"],         ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",         "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"],         ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)",         "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)",         "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)",         "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)",         "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)",         "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",         "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",         "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",         "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)",         "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]     ] }); }); </script> 

my html code follows text color (selected text in individual div only) has updated selected color:

<div id="canvas-wrap"><!-- div canvas wrap --> <canvas id="mycanvas" width="400px" height="250px" style="border:1px solid #d3d3d3; "> </canvas> <!-- script of image uploader -->  <script type="text/javascript"> var imageloader = document.getelementbyid('imageloader');     imageloader.addeventlistener('change', handleimage, false); var canvas = document.getelementbyid('mycanvas'); var ctx = canvas.getcontext('2d'); mycanvas.style.border = "red 1px solid";   var x = 0; var y = 0; var width = 400; var height = 250;  function handleimage(e){     var reader = new filereader();     reader.onload = function(event){         var img = new image();         img.onload = function(){              ctx.drawimage(img, x, y, width, height);         }         img.src = event.target.result;     }     reader.readasdataurl(e.target.files[0]);     } </script>      <div class="resizediv" id="yname" ondblclick="contenteditable='true'" onfocus="document.execcommand('selectall',false,null);"><span>your name</span></div>     <div class="resizediv" id="designation" ondblclick="contenteditable='true'" onfocus="document.execcommand('selectall',false,null);"><span>designation</span></div>     <div class="resizediv" id="cname" ondblclick="contenteditable='true'" onfocus="document.execcommand('selectall',false,null);"><span>your company name</span></div>     <div class="resizediv" id="youraddress1" ondblclick="contenteditable='true'" onfocus="document.execcommand('selectall',false,null);"><span>your address1</span></div>     <div class="resizediv" id="youraddress2" ondblclick="contenteditable='true'" onfocus="document.execcommand('selectall',false,null);"><span>your address2</span></div>     <div class="resizediv" id="email" ondblclick="contenteditable='true'" onfocus="document.execcommand('selectall',false,null);"><span>email</span></div>     <div class="resizediv" id="website" ondblclick="contenteditable='true'" onfocus="document.execcommand('selectall',false,null);" style=""><span>website</span> </div>     <div class="resizediv" id="phoneno" ondblclick="contenteditable='true'" onfocus="document.execcommand('selectall',false,null);"><span>+91 1234567890</span></div>     <div class="resizediv" id="faxno" ondblclick="contenteditable='true'" onfocus="document.execcommand('selectall',false,null);"><span>+(91) 80 400 10 200</span></div>     <div class="resizediv" id="mno" ondblclick="contenteditable='true'" onfocus="document.execcommand('selectall',false,null);"><span>mobile no.</span></div>   </div>