Pass both values to variables in CSS

Question

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="" />

Kalimah · Accepted Answer · 2019-11-17 21:28:49Z

1

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="" />

answered Nov 17, 2019 at 21:28

Kalimah

11.5k11 gold badges48 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kalimah Over a year ago

How it does not answer the question? The code I provide replaces both variables and I believe that is what he asked.

Collectives™ on Stack Overflow

Pass both values to variables in CSS

The script:

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

The script:

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related