how to set html color input values to div colors on click

If div is clicked, html5 color inputs values should set to clicked div color and background color values.

I tried code

$(function() {
  $("#changeMe").on('click', function() {
    $('#designer-javascript-color').val($(this).css("color"));
    $('#designer-javascript-backcolor').val($(this).css("background-color"));

  });

});
Selected item color:
<input type="color" id="designer-javascript-color" />
<br>Selected item background color:
<input type="color" id="designer-javascript-backcolor" />


<br/>

<div id="changeMe" style='color:white;background-color: blue'>

  click here</div>

After clicking in click me both inputs have still black colors. How to fix this so that white and blue colors apper in inputs ?

Testcase is at http://jsfiddle.net/bpc2w43w/

Answers:

Answer

Convert the rgb value to hex before to use it:

function rgbToHex(rgb) {
  var a = rgb.split("(")[1].split(")")[0].split(",");
  return "#" + a.map(function(x) {
    x = parseInt(x).toString(16);
    return (x.length == 1) ? "0"+x : x;
  }).join("");
}


$(function () {
  $("#changeMe").on('click', function() {
    $('#designer-javascript-color').val(rgbToHex($(this).css("color")));
    $('#designer-javascript-backcolor').val(rgbToHex($(this).css("background-color")));
  });
});
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>

Selected item color: <input type="color" id="designer-javascript-color" />
<br>
Selected item background color:<input type="color" id="designer-javascript-backcolor" />


<br/>

<div id="changeMe" style='color:white;background-color: blue'>

    click here</div>

Answer

The value returned from $(this).css('color') and $(this).css('background-color') is a RGB value. Therefore, you need to convert it to a hexadecimal value. Borrowing someone's solution to convert the value, here's a solution to your problem.

$(function() {
        $('#changeMe').on('click', function() {
             $('#designer-javascript-color').val(rgb2hex($(this).css('color')));
             $('#designer-javascript-backcolor').val(rgb2hex($(this).css('background-color')));
        });
});

var hexDigits = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"]; 

//Function to convert hex format to a rgb color
function rgb2hex(rgb) {
   rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
   return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

function hex(x) {
   return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
}
Answer

This works

           Selected item color: <input type="color" id="designer-javascript-color" >
    <br>
    Selected item background color:<input type="color" id="designer-javascript-backcolor">


<br/>

<button id="changeMe" style='color:white;background-color: blue'>

click here</button>

Also when you select a color in the selector remember to move the slider on the right side of your color picker so that a lighter shade of your color can be selected.

$("#changeMe").click(function() {
 var a = $("#designer-javascript-color").val();
 var b= $("#designer-javascript-backcolor").val();

  $("#changeMe").css({
  'color' : a,
  'background-color': b
  });
});

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.