My challenge lies in passing two values to the CSS within the <style> tags. The values are: (
background-color: --placeholder; color: --placeholdtext;var $tempt = $("<input>");
$("body").append($tempt);
$tempt.val(newtextStyle).select();
document.execCommand("copy");
$tempt.remove();
it only passes the value of --placeholdtext;. On the other hand, when I place the following code at the end:
var $temp = $("<input>");
$("body").append($temp);
$temp.val(newStyle).select();
document.execCommand("copy");
$temp.remove();
it only passes the value of --placeholder;. My ultimate goal is to be able to pass both values simultaneously.
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="" />