Question

我希望用户能够将他们喜欢的颜色添加为具有html颜色输入元素创建的背景颜色的新div。目前我有这段代码：

HTML

$HOME

JS

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

不幸的是，每次点击颜色选择器时它都会改变所有div的颜色。我需要使用数组吗？

Answer 1

＆＃34;附加＆＃34;不是javascript标准方法。

使用更改事件来触发新的div创建

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您只能使用一个活动。无需复杂化。 :) 基本上，当您更改颜色输入值时，您会读取新颜色并创建新的div。您可以使用input或change事件，但我认为change更适合only fires when user has changed the value。

在您的示例代码中，您希望在输入点击时创建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

HTML div标签输入新的html div元素的颜色值控件

2 个答案: