CODEWITHSUNDEEP
javascripthtmljquery
Harald
Harald

Reputation: 289

How to use HTML5 color picker with event listener

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

Upvotes: 3

Views: 5090

Answers (1)

flyingturtles
flyingturtles

Reputation: 903

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'>

Upvotes: 5

Related Questions