更改输入类型颜色JavaScript的事件

我想在输入type=color时获得新颜色，如果我使用jquery，它就会工作

$(document).ready(function() {
    var colorPicker = $('.input-color');

        colorPicker.on("change", function watchColorPicker() {
            var val = $(this).val();
            $(".title").each(function() {
                $(this).css({'color' : val});
            });
        });
});

但我不知道如何在原生js上编写。 错误为.change或.on不是函数

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);
};

window.onload=function（）{
var colorPicker=document.getElementsByClassName（'input-color'）；
var text=document.getElementsByClassName（'title'）；
函数颜色更改（颜色）{
对于（var j=0；j

我对您的纯js代码进行了一点压缩，看起来干净而轻巧。还减少了循环的数量

const colorPicker=document.querySelector（“#输入颜色”）；
常量elems=document.querySelectorAll（'.title'）；
colorPicker.addEventListener（'change'，function（）{
Array.from（elems.forEach）（v=>v.style.color=this.value）；
});

首先
第二
第三个
“如何在本机js上编写”DOM，而不是“本机js”。您希望直接使用DOM，而不是通过jQuery使用DOM。不管怎么说，语言都是JavaScript。这段代码看起来应该可以正常工作。请使用可运行的堆栈片段（
[]
工具栏按钮）更新您的问题，演示问题……事实上，它确实：