事件改變輸入型彩色的JavaScript

我想，如果我使用jquery得到輸入型新顏色=顏色，它的工作事件改變輸入型彩色的JavaScript

$(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或。對是不是一個函數

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

來源

2017-07-27 Atm54_17

* DOM，而不是「怎樣在本機JS寫」，「原生JS。」你想直接使用DOM，而不是通過jQuery使用DOM。 **語言**不管JavaScript。 –

這段代碼看起來應該可以工作。請使用Stack Snippets（'[<>]'工具欄按鈕）以** runnable ** [mcve]更新您的問題，以證明問題。 –

...其實，它確實：https：//jsfiddle.net/ts4t9m1n/ –

我已經壓縮的純JS代碼一點點，看上去幹淨而光。也減少了循環次數。

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>

來源

2017-07-27 21:18:55

事件改變輸入型彩色的JavaScript

回答

相關問題