I am looking for a way to use eventlisteners and getting every color change by moving the mouse over the palette. It works only without eventlistener and I would like to know why. Where is my mistake...

It works, if I use the following code. Moving the mouse over the palette, fires every color change.

HTML:

<input type="color" id='picker_1' oninput="getData(this.value)">

Javascript:

function getData(value){console.log(value);

Using an eventlistener, I get only values by opening or closing the picker, but not with moving over the palette.

HTML:

<input type="color" id='picker_1'>

Javascript:

let el = document.getElementById('picker_1');
el.addEventListener('oninput', function() {  // I tried also onchange
 console.log(el.value);
});

The best solution would be to use the standard HTML5 color picker with jQuery...

Happy for some help. Thanks

I am looking for a way to use eventlisteners and getting every color change by moving the mouse over the palette. It works only without eventlistener and I would like to know why. Where is my mistake...

It works, if I use the following code. Moving the mouse over the palette, fires every color change.

HTML:

<input type="color" id='picker_1' oninput="getData(this.value)">

Javascript:

function getData(value){console.log(value);

Using an eventlistener, I get only values by opening or closing the picker, but not with moving over the palette.

HTML:

<input type="color" id='picker_1'>

Javascript:

let el = document.getElementById('picker_1');
el.addEventListener('oninput', function() {  // I tried also onchange
 console.log(el.value);
});

The best solution would be to use the standard HTML5 color picker with jQuery...

Happy for some help. Thanks

• javascript
• html
• jquery

1 Answer 1

There is no event as oninput when using addEventListener, you should remove the on prefix and use input instead.

let el = document.getElementById('picker_1');
el.addEventListener('input', function() {  // I tried also onchange
 console.log(el.value);
});

<input type="color" id='picker_1'>