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

user_9067589 0
Viewed 350

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?

html javascript
1 Answers

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>

user_155795730
Related