入力色でクリックすると色が変わります

Question

クリックすると色のタイトルが変わります。 私は次の書き込み：

window.onload = function() { 
 
    var color = document.getElementById('input-color'); 
 
    var elems = document.querySelectorAll('.title'); 
 
    function chancheColor(){ 
 
     for (var i = 0; i < elems.length; i++) { 
 
      elems[i].addEventListener('click', function() { 
 
       color.click(); 
 

 
       color.addEventListener('change', function() { 
 
        var name = this.value; 
 

 
        for (var i = 0; i < elems.length; i++) { 
 
         elems[i].style.color = name; 
 
        } 
 
       }); 
 

 
      }); 
 
     } 
 
    } 
 
    chancheColor(); 
 
};

<input id="input-color" type="color"> 
 
<p class="title">First</p> 
 
<p class="title">First</p> 
 
<p class="title">First</p>

私は color.clickのクリックをシミュレート（）; それは本当ですか？ 私はどのようにタイトルの現在の値を取得し、知らない

今私の機能は、私が（;;私< elems.length私は++ VAR I = 0）のための第二サイクルを持っているbeacause すべてのタイトルの色をсhangeそれはクリックされた。

一般的に、このようにして関数内のパラメータをどのように転送することが可能ですか？ color.addEventListener（ 'change'、function（）{}）;

Answer 1

forループで複数回カラーを使用するイベントハンドラをアタッチしていますが、その必要はありません。ループ内部のイベントハンドラは必要ありません。クリックしたpを保存して、input-colorのchangeイベントハンドラ内でその色を変更するために、クリックした 'p'の色を変更するだけです。

各 clickで

window.onload = function() { 
 
    var color = document.getElementById('input-color'); 
 
    var elems = document.querySelectorAll('.title'); 
 
    var currentElem; 
 
    function chancheColor(){ 
 
     for (var i = 0; i < elems.length; i++) { 
 
      elems[i].addEventListener('click', function() { 
 
       currentElem = this; 
 
       color.click(); 
 
      }); 
 
     } 
 
    } 
 

 
    color.addEventListener('change', function() { 
 
       var name = this.value; 
 
       currentElem.style.color = name; 
 
      }); 
 
    chancheColor(); 
 
};

<input id="input-color" type="color"> 
 
<p class="title">First</p> 
 
<p class="title">First</p> 
 
<p class="title">First</p>

Answer 2

elems[i]であなたはcolorに追加changeイベントハンドラをアタッチしています。

移動changeイベントの添付ファイルの外にforのループ。

一般的に、このような場合、関数 のパラメータをどのように転送することができますか？

あなたはtrueにクリックされた要素.datasetプロパティを設定し、設定兄弟を.datasetfalseに、changeハンドラ内でクリックされた要素のみを選択するように属性セレクタ".title[data-clicked=true]"で.querySelector()を使用するElement.datasetを使用することができます。 `elemsで各` click`で

window.onload = function() { 
 
    var color = document.getElementById('input-color'); 
 
    var elems = document.querySelectorAll('.title'); 
 

 
    function chancheColor() { 
 
    for (var i = 0; i < elems.length; i++) { 
 
     elems[i].addEventListener('click', function() { 
 
     for (var j = 0; j < elems.length; j++) { 
 
      elems[j].dataset.clicked = false; 
 
     } 
 
     this.dataset.clicked = true; 
 
     color.click(); 
 
     }); 
 
    } 
 
    } 
 
    color.addEventListener('change', function() { 
 
    var clicked = document.querySelector(".title[data-clicked=true]"); 
 
    if (clicked) { 
 
     console.clear(); 
 
     clicked.style.color = this.value; 
 
    } 
 
    else { 
 
     console.log("Click a .title element to change the elements' color"); 
 
    } 
 
    }); 
 
    
 
    chancheColor(); 
 
};

<input id="input-color" type="color"> 
 
<p class="title">First</p> 
 
<p class="title">First</p> 
 
<p class="title">First</p>