新しいHTML div要素のHTML divタグの入力色の値のコントロール

Question

html色の入力要素で作成された背景色で新しいdivとして好みの色を追加できるようにします。

HTML

<div id="grid"> 
<input id="color" type="color" /> 
</div>  

JS

var grid = document.getElementById("grid"); 

color_input = document.getElementById("color"); 
color_input.addEventListener("click", function() { 
var newdiv = document.createElement("div"); 
grid.append(newdiv); 
color_input.addEventListener("input", function() { 
newdiv.style.backgroundColor = color_input.value; 
}) 
}); 

は、残念ながら、それはすべてのdivカラーピッカーがクリックされるたびの色を変更します。現在、私はこのコードを持っています。 配列などを使用する必要がありますか？

Answer 1

"append"はjavascriptの標準的な方法ではありません。

使用変更イベントを新しいdiv要素の作成あなただけのイベントを使用することができます

var grid = document.getElementById("grid"); 
 
color_input = document.getElementById("color"); 
 

 

 
color_input.addEventListener("change", function() { 
 
    var newdiv = document.createElement("div"); 
 
    grid.appendChild(newdiv); 
 
    newdiv.style.backgroundColor = color_input.value; 
 

 
});

div{ 
 
    height:50px; 
 
    width:50px; 
 
}

<div id="grid"> 
 
<input id="color" type="color" /> 
 
</div> 

Answer 2

を発射します。物事を複雑にする必要はありません。 :) 基本的には、新しい色を読み取り、色の入力値が変更されたときに新しいdivを作成します。 inputまたはchangeイベントを使用することができますが、changeの方が良いと思います。only fires when user has changed the valueです。

例のコードでは、ユーザーが色を変更しなくても、入力クリック時にdivを作成します。 また、ユーザーがクリックするたびに、入力値が変更されたときに何かを行う新しいリスナーを設定します。しばらくすると、1回のクリックで同じことが複数回実行されます（これまでのリスナーごとに1回）。 （サイドノート：同じことをしても同じコードであっても、毎回別のものとして扱われる無名関数を提供するので、そのように動作します）

以下のコードをチェックしてください。理解するのはかなり簡単です。 :)

HTML：

<div> 
    <label>Pick a color:</label> 
    <input type="color" id="color-picker"> 
</div> 
<div id="last-colors"> 
    <!-- <div class="saved-color"></div> --> 
</div> 

CSS：

.saved-color { 
    border: 1px solid #000; 
    display: inline-block; 
    margin: 2px; 
    height: 20px; 
    width: 20px; 
} 

JS：

var colorPickerEl = document.getElementById('color-picker'); 
var lastColorsEl = document.getElementById('last-colors'); 

colorPickerEl.addEventListener('change', colorPickerOnChange, false); 

function colorPickerOnChange(e) { 
    var color = e.target.value; 
    addColorDiv(color); 
}; 

function addColorDiv(color) { 
    var newDiv = document.createElement("div"); 
    newDiv.className = 'saved-color'; 
    newDiv.style.backgroundColor = color; 
    lastColorsEl.appendChild(newDiv); 
    //alternatively, insert new div before old divs: 
    //lastColorsEl.insertBefore(newDiv, lastColorsEl.firstChild); 
}; 

https://codepen.io/anon/pen/mAGJOd