problem: building drawing board app uses number hex converter function. right return single digits conversions.
example: r:0,g:0, b:0 returns #000, , not #000000 believe why can't colors update properly, , values work.
desired result: want numbers converted double digits. r:0,g:0,b:) convert #000000 , not #000, although they're same thing, other colors rely on double digits, understanding. want number hex conversions 6 digits.
[solved]: changed way of getting values css's rgb(r,g,b ) instead of using hex values
jsbinhttp://jsbin.com/doqiwocufa/edit?html,css,js,console,output
javascript:
var $red = 0; function changerednumboxvalue(value) { var $numbox = $('#rednumber'); $red = value; $numbox.val($red); console.log($red); } function changeredsliderval(value) { var $slider = $('#red'); $red = value; $slider.val($red); console.log($red); } var $green = 0; function changegreennumboxvalue(value) { var $numbox = $('#greennumber'); $green = value; $numbox.val($green); console.log($green); } function changegreensliderval(value) { var $slider = $('#green'); $green = value; $slider.val($green); console.log($green); } var $blue = 0; function changebluenumboxvalue(value) { var $numbox = $('#bluenumber'); $blue = value; $numbox.val($blue); console.log($blue); } function changebluesliderval(value) { var $slider = $('#blue'); $blue = value; $slider.val($blue); console.log($blue); } //convert rgb hex function rgbtohex() { $hexred = $red.tostring(16); $hexgreen = $green.tostring(16); $hexblue = $blue.tostring(16); console.log($hexred); console.log($hexgreen); console.log($hexblue); return '#' + $hexred + $hexgreen + $hexblue; } //update color based on hex values function updatecolor() { $colorchosen = $('#color-chosen'); $color = rgbtohex(); $colorchosen.css('background-color', $color); } updatecolor(); html:
<!doctype html> <html> <head> <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>js bin</title> </head> <body> <span>blue</span> <input id="red" type="range" name="amount2" value="0" min="0" max="255" oninput="changenumboxvalue(this.value)"> <input id="rednumber" type="number" name="amountinput2" value="0" min="0" max="255" oninput="changesliderval(this.value)"> </body> </html> css:
#color-chosen { border: 1px solid black; width: 100px; height: 100px; margin: 0 auto; }
you need padding 0 , cut string string.prototype.slice():
the slice() method extracts section of string , returns new string.
$hexred = ('0' + $red.tostring(16)).slice(-2); 
Comments
Post a Comment