Блог

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

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

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

«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>       

Вы можете использовать только одно событие. Не нужно усложнять. 🙂 По сути, вы считываете новый цвет и создаете новый div при изменении входного значения цвета. Вы можете использовать input change событие or, но я думаю change , что оно подходит лучше, поскольку оно срабатывает только тогда, когда пользователь изменил значение.

В вашем примере кода вы хотите создать div при нажатии на ввод, даже если пользователь не изменит цвет. Кроме того, каждый раз, когда пользователь нажимает на него, вы устанавливаете нового дополнительного прослушивателя, который что-то делает при изменении входного значения, поэтому через некоторое время 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