Search the Community

I have divs which can be clicked and then another div will pop out with few colors for users to choose. After choosing the colors in the div that pop out the div that is clicked will change into that background. I used class to determain which div is clicked. function works fine but I realized when I try console.log the class I used as global to findout which div to change the background. the console.log keeps adding up also multiplying too. Can I have a pair of eye to see where it's adding things up? var colorHolder = null; //used to store the location where color is picked function colorFieldPicker(onClickSide, xValInput, yValInput,side){ onClickSide.on('click', function(event){ colorHolder = $(this).attr('class'); var yVal = (event.pageY - yValInput) + "px"; var xVal = (event.pageX / xValInput) + "px"; $('.colorSelectBox').css({"left": xVal, "top": yVal}).toggle(); colorPickerOnClick(side); }); } function colorPickerOnClick(side){ $('div.black').add('div.yellow').on('click', function(){ var colorAttr = $(this).attr('value'); var splitClass = colorHolder.split(" "); side.closest('div').find('.'+splitClass[0] + '.'+splitClass[1]).css({"background": colorAttr}).attr('value', colorAttr); console.log(colorHolder); //this is where it's displaying in console that it'll keep on adding up. $('.colorSelectBox').css({"display": "none"}); }); } Thanks everyone in advance.

I am trying to convert colors from Hex to HSL (Not HSL to Hex). I am using a PHP function for this purpose. But It's not working properly for some colors. For example for #e04c4c the HSL should be (0, 70%, 59%) which it isn't the case with the function. function hexToHsl($hex) { $red = hexdec(substr($hex, 0, 2)) / 255; $green = hexdec(substr($hex, 2, 2)) / 255; $blue = hexdec(substr($hex, 4, 2)) / 255; $cmin = min($red, $green, $blue); $cmax = max($red, $green, $blue); $delta = $cmax - $cmin; if ($delta === 0) { $hue = 0; } elseif ($cmax === $red) { $hue = (($green - $blue) / $delta) % 6; } elseif ($cmax === $green) { $hue = ($blue - $red) / $delta + 2; } else { $hue = ($red - $green) / $delta + 4; } $hue = round($hue * 60); if ($hue < 0) { $hue += 360; } $lightness = (($cmax + $cmin) / 2) * 100; $saturation = $delta === 0 ? 0 : ($delta / (1 - abs(2 * $lightness - 1))) * 100; if ($saturation < 0) { $saturation += 100; } $lightness = round($lightness); $saturation = round($saturation); //return "hsl(${hue}, ${saturation}%, ${lightness}%)"; return array($hue, $saturation, $lightness); } This is how I used it: $templatePrimaryColor = '#e04c4c'; $templatePrimaryColor = str_replace("#", "",$templatePrimaryColor); list($h,$s,$l) = hexToHsl($templatePrimaryColor); $primaryColor = "hsl(${h}, ${s}%, ${l}%)"; This is the output: echo '<pre>',print_r(hexToHsl($templatePrimaryColor)).'</pre>'; Array ( [0] => 0 [1] => 99 [2] => 59 ) 1 Does anyone know what is the problem there? Thank you.