How to get the new color value from Input Color after choosing it?

Question

I use Input Color to change the color of the text in a table cell.

I can select the cell, click on the color button, select the color and press enter (on Chrome).

My problem is that the color changes only after I press again on the color button (and the window open again..).

How to change/get the value of the element after selecting the new color without clicking on it again ?

Is this related to the EventListener I use for the Input Color ?

I need to use JavaScript for this, no jQuery.

Answer 1

You can get input value with onchange event.

jQuery('#color').on('change',function(){
	jQuery('#choosen-color').text(jQuery(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="color" id="color">
<div id="choosen-color"></div>

UPDATE

document.getElementById('color').onchange=function(){
	// do whatever you want with value
  alert(this.value);
}

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