JavaScript event “change” doesn’t trig

Hi, I’m working with javascript on a new custom color picker for a new plugin I’m working on.
It works perfectly except for a problem. On the color input, I set two Event Listeners. The first on “change” (in a different plugin) and the second on “click” (in this new plugin).
When with the new plugin I select a new color the input change and the new color is displayed; but the function that should be executed on “change” (in the other plugin) doesn’t fire.

Does anyone as any idea why?

here below is the code:

html:

<input id="color1" type="color" value="#ffffff">

JavaScript Plugin one:

 
 const clr1 = document.querySelector('#color1');

 if(clr1){
   clr1.addEventListener('change', function(){
     // do something
   } );
 }

I want to add the the first plugin work perfectly with the standard browser color picker

JavaScript Plugin Two:

 
 const clr2 = document.querySelector('#color1');

 if(clr2){
   clr2.addEventListener('click', function(){
     e.preventDefault();
     this.disabled = true;
     opnePicker(); // it open the picker popup win
   } );

   // when I set the color in the input field

   var newclr = getColor() // it returns the clicked color
   clr2.disabled = false;
   clr2.value = newclr;
   closePicker(); // it close the picker popup win
 }

The input color change it’s value, but as I said it doesn’t trig the first “change” event.

• This topic was modified 4 years, 9 months ago by antonop4u.