Add change event listener to html color picker

Hi everyone,

I am trying to use a html  color picker and use the user selected color in my application. However I came across a problem which I am not able to solve.
My situation:

I created a block which consists out of a HTML input with type "color". The value of this input is linked to a local variable "SelectedColor". I tried to add an event listener to this input in the "OnReady" event as you can see in the following code, but the "OnChange" action is not called when changing the color as a user.


function updateChange(event) {




var colorPicker = document.getElementById($parameters.InputId);

colorPicker.addEventListener("change", updateChange);


What is the solution to this problem?


Hi Tom,

I suggest you define the Input OnChange handler from the widget property section instead of registering the same by defining an additional custom JS code. The variable associated with the color type input is capturing the color change hexa value. See this sample screen: ColorInput_Task

Let us know if you are looking for something else?

Refer to the attached .oml

I hope this helps you!

Kind regards,

Benjith Sam


That is exactly what I needed.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.