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

【问题标题】：HTML div tag input color value control for new html div element新 html div 元素的 HTML div 标签输入颜色值控件
【发布时间】：2023-12-31 06:55:01
【问题描述】：

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

HTML

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

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 的颜色。我需要使用数组吗？

【问题讨论】：

什么是改变所有 div 的颜色？所有的 div 是什么

标签： javascript html color-scheme color-picker

【解决方案1】：

“追加”不是 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>

【讨论】：

【解决方案2】：

您只能使用一个事件。没必要把事情复杂化。 :) 基本上，当颜色输入值更改时，您读取新颜色并创建一个新 div。您可以使用input 或change 事件，但我认为change 更适合，因为它是only fires when user has changed the value。

在您的示例代码中，您希望在点击输入时创建 div，即使用户不会更改颜色。此外，每次用户单击它时，您都会设置新的 additional 侦听器，当输入值更改时会执行某些操作，因此过了一会儿，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

【讨论】：