jquery - Event for change input type color JavaScript -
i want new color on input type=color, if use jquery it's working
$(document).ready(function() { var colorpicker = $('.input-color'); colorpicker.on("change", function watchcolorpicker() { var val = $(this).val(); $(".title").each(function() { $(this).css({'color' : val}); }); }); });
but don't know, how write on native js. error .change or .on not function
window.onload = function(){ var colorpicker = document.getelementsbyclassname('input-color'); var text = document.getelementsbyclassname('title'); function colorchange(color) { for(var j =0; j < color.length; j++) { color[j].addeventlistener('change', function () { var newcolor = this.value; for(var =0; < text.length; i++) { text[i].style.color = newcolor; } }) } } colorchange(colorpicker); };
i've compressed pure js code little bit, looks clean , light. reduced number of loops.
const colorpicker = document.queryselector('#input-color'); const elems = document.queryselectorall('.title'); colorpicker.addeventlistener('change', function() { array.from(elems).foreach(v => v.style.color = this.value); });
<input id="input-color" type='color' /> <p class='title'>first</p> <p class='title'>second</p> <p class='title'>third</p>
Comments
Post a Comment