CODEWITHSUNDEEP
javascriptjquerycss
Brgerg30879
Brgerg30879

Reputation: 93

Pass both values to variables in CSS

I can't pass the two values to the CSS in <style> tags, they are: (background-color: --placeholder; color: --placeholdtext;). I can pass either one or the other value, but not both. I copy the CSS to the clipboard then. If I put this code at the end in the function: 

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

then it passes value of --placeholdtext;. If I put the other at the end:

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

then it passes value of --placeholder;. I need to pass both.

The script:

function copyToClipboard(element) {


  let currentColor = $("#valueInput").val();
  let currentStyle = $(element).text();

  let newStyle = currentStyle.replace('--placeholder', "#" + currentColor);


  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();

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



}
#button_cont {
  background-color: --placeholder;
  color: --placeholdtext;
  font-size: 18px;
  text-decoration: none;
  padding: 10px;
  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">The button</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="hidden" id="myField" class="jscolor" onchange="update(this.jscolor);" value="" />

Upvotes: 1

Views: 375

Answers (1)

Kalimah
Kalimah

Reputation: 11437

You have some repetitive code in your example. For example you can chain replace method which means that you can avoid having two separate code for color and background color.

See this example:

function copyToClipboard(element) {

  let currentColor = $("#valueInput").val();
  let currentStyle = $(element).text();
  var actualColor = $('#button_cont').css('color');

  let newStyle = currentStyle.replace('--placeholder', "#" + currentColor).replace('--placeholdtext', actualColor);

  $('#myField').val(actualColor);

  let $temp = $("<input>");
  $("body").append($temp);
  $temp.val(newStyle).select();
  document.execCommand("copy");
  $temp.remove();
}
#button_cont {
  background-color: --placeholder;
  color: --placeholdtext;
  font-size: 18px;
  text-decoration: none;
  padding: 10px;
  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">The button</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>


<input type="hidden" id="myField" class="jscolor" onchange="update(this.jscolor);" value="" />

Upvotes: 1

Related Questions