Search code examples
javascriptjscolor

Pass actual color to value in input on js


I need to pass color value to <input> dynamically so I could copy CSS then to clipboard. The color in question is that which changes automatically when you change bg color of the button. It's always black or white and it doesn't pass to --placeholdtext by itself. Now it's copied always white. I use http://jscolor.com/. The variable I think exists somewhere in jscolor.js file, couldn't find it and use.

The code I have now:

function copyToClipboard(element) {


  let currenttextColor = $(".jscolor").val();
  let currenttextStyle = $(element).text();

  let newtextStyle = currenttextStyle.replace('--placeholdtext', "#"+currenttextColor);

  document.getElementById('myField').value = currenttextColor;


    var $tempt = $("<input>");
  $("body").append($tempt);
  $tempt.val(newtextStyle).select();
  document.execCommand("copy");
  $tempt.remove();

   
 }
   
 function update(jscolor) {
      
       document.getElementById('button_cont').style.color = '#' + jscolor;


    }
#button_cont {

color: --placeholdtext;
font-size: 18px;
text-decoration: none;
 
padding: 10px;
/* border: 1px solid #ffffff; */
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
 display: inline-block;
 transition: all 0.4s ease 0s;
  
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script>
<a href="#" id="button_cont" >Call to action</a>  

   
<button class="jscolor{valueElement:'valueInput', styleElement:'button_cont'}" >
    Pick a color
</button> 
 <input id="valueInput" value="ed3330">
<button onclick="copyToClipboard('style')">Copy button</button></div></div> 

<input type="text" id="myField" class="jscolor" onchange="update(this.jscolor);" style="display: none;" />

As you can see I use document.getElementById('myField').value = currenttextColor; to insert value with the color to the <input> below the code but I can't find the needed value variable with the black or white color.


Solution

  • <script type="text/javascript">
    
    
    
     function copyToClipboard(element) {
    
    
       var actualColor = window.getComputedStyle(document.getElementById('button_cont')).getPropertyValue('color');
    
      document.getElementById('myField').value = actualColor;
    
    
      let currenttextColor = $(".jscolor").val();
      let currenttextStyle = $(element).text();
    
      let newtextStyle = currenttextStyle.replace('--placeholdtext', currenttextColor);
    
    
    
        var $tempt = $("<input>");
      $("body").append($tempt);
      $tempt.val(newtextStyle).select();
      document.execCommand("copy");
     $tempt.remove();
    
    
    
     }  
    
    </script>