CODEWITHSUNDEEP
javascriptjquery
Atm54_17
Atm54_17

Reputation: 179

Event for change input type color JavaScript

I want get new color on input type=color, if I 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 I don't know, how write on native js. The error is .change or .on is not a 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 i =0; i < text.length; i++) {
                    text[i].style.color = newColor;
                }
            })
        }
    }

    colorChange(colorPicker);
};

Upvotes: 4

Views: 4294

Answers (1)

kind user
kind user

Reputation: 41893

I've compressed your pure js code a little bit, looks clean and light. Also reduced the 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>

Upvotes: 4

Related Questions