CODEWITHSUNDEEP
javascripthtml
Miger
Miger

Reputation: 1245

HTML Input Color Picker, Apply Changes In Sync With Color Picker Selection

I have a simple setup where I'm using HTML input tag to get a color picker.

However I seem unable to get the results directly, here is the setup I use:

  function updateBackground( e ) {
    document.getElementById("button").style.backgroundColor = e.value
  }
<input id="colorpicker" type="color" value="#2b439d" onchange="updateBackground( this )">

<button id="button" style="font-size:24px; color:rgba(0,0,0,0)">space space space space</button>

No matter what I try, be it onchange, mouseup or mousemove I cannot get the value in in sync with the color picker selection. What I mean with that is that the button-element only changes its background color when I click away from the color picker modal.

I'd like the button to be updated in sync with the changes the user makes inside the color picker modal. Basically the same effect that the color picker preview has, which also updates in sync with the changes the user makes in the color picker modal.

How can I get the results of the color picker in sync with the users selection?

Upvotes: 2

Views: 1017

Answers (1)

BTSM
BTSM

Reputation: 1663

You can use oninput property.

<input id="colorpicker" type="color" value="#2b439d" oninput="updateBackground( this )">

<button id="button" style="font-size:24px; color:rgba(0,0,0,0)">space space space space</button>

<script>
  function updateBackground( e ) {
    document.getElementById("button").style.backgroundColor = e.value
  }
</script>

Upvotes: 4

Related Questions