How to change background-color and color both respectively on js color picker?

Question

How to change background-color and color of any element e.g. input box or a div respectively on same event on js color picker

<div class="search-div" style="margin:-60px auto;">
  <input type="text" max-length="255" id="rect" placeholder="Search" class="search-box"/>
  <button class="btn btn-md btn-warning jscolor {valueElement:'valueInput',styleElement:'rect'}">Click here to pick a color</button>
</div>

i have use jscolor.js to pick color and apply it to input box

jscolor script link

what i have try jsfiddel link

i want to change both colors - background-color and text-color respectively

Answer 1

Try That

var options = {
    valueElement: "valueInput",        
    styleElement:'rect',
    width: 300,
    height: 120,
    sliderSize: 20,
    position: 'top',
    insetColor: '#CCC',
    backgroundColor: '#202020'
};

var pickers = {};
function update () {
    document.getElementById('rect').style.backgroundColor = pickers.changeBackgroundColor.toHEXString();
    document.getElementById('rect').style.color=pickers.changecolor.toHEXString();
}

pickers.changecolor = new jscolor('change-color', options);
pickers.changecolor.onFineChange = update;
pickers.changecolor.fromString('000');          
pickers.changeBackgroundColor = new jscolor('change-backgroundColor',options);
pickers.changeBackgroundColor.onFineChange = update;

update('change-color');
			

<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js"></script>
  <input type="text" max-length="255" id="rect" placeholder="Search" class="search-box"/>
  <button id="change-backgroundColor">Click here to pick a background color</button>
  <button id="change-color">Click here to pick a font color</button>