Razvan Cuceu Razvan Cuceu - 2 months ago 42
Javascript Question

Can't get color of button in jQuery using jsColor

I have a button that acts like trigger for color picker and it should change the color of text in canvas. The library that I'm using is jscolor.

<button class="color-picker-btn jscolor {valueElement:'valueElement', onFineChange:'update(this)', value:'ffffff'}"></button>
<input id="valueElement"></input>


js:

function update(jscolor) {
console.log(jscolor);
canvas.getActiveObject().fill = ( jscolor );
}


In the console I get something like this:

jscolor {value: "ffffff", valueElement: input#valueElement, styleElement: button.color-picker-btn.jscolor.{valueElement:'valueElement',.onFineChange:'update(this)',.value:'ff…, required: true, refine: true…}
_processParentElementsInDOM:()activeClass:"jscolor-active"
backgroundColor
:
"#FFFFFF"
borderColor
:
"#BBBBBB"
borderRadius
:
8
borderWidth
:
1
buttonColor
:
"#000000"
buttonHeight
:
18
closable
:
false


..and a lot more lines. How to get only the color?

Answer

Your problem is the this here, the this is the button:

<button class="color-picker-btn jscolor {valueElement:'valueElement', onFineChange:'update(this)', value:'ffffff'}"></button>
<input id="valueElement"></input>

You can send the input object, like this:

<button class="color-picker-btn jscolor {valueElement:'valueElement', onFineChange:'update(valueElement)', value:'ffffff'}"></button>
<input id="valueElement"></input>

and in your Javascript function, take the color from the object 'value':

function update(jscolor) {
    console.log(jscolor.value);
    canvas.getActiveObject().fill = ( jscolor.value );
}

Here is the code in jsfiddle: https://jsfiddle.net/sidanmor/g8odgju6/

Comments