HTML вход DIV тега управление значением цвета для нового HTML сНа элемента

Question

Я хочу, чтобы пользователи могли добавлять свои любимые цвета, как новый DIV с цветом фона, создаваемого элементом ввода HTML цвета. В настоящее время у меня есть этот код:

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

К сожалению, он меняет цвет всех див каждый раз, когда выбор цвета кнопки. Нужно ли использовать массив или что-то еще?

Answer 1

«добавить» не является стандартным методом JavaScript.

события Используйте изменение огнь нового творения Дива

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 на входе мыши, даже если пользователь не изменит цвет. Кроме того, каждый раз, когда пользователь нажимает на нее, вы установили новый дополнительный слушателю, что-то делать, когда входное значение изменяется, поэтому через некоторое время, один щелчок делает то же самое несколько раз (один раз для каждого слушателя установлено до сих пор). (Обратите внимание: он работает именно так, потому что вы предоставляете анонимную функцию, которая каждый раз рассматривается как другая, даже если она делает то же самое и имеет тот же код)

Проверьте этот код. Это должно быть довольно просто понять. :)

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

ЯШ:

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