HTML div tag input color value control for new html div element

Question

I want users to be able to add their favourite color as a new div with the background color created by the html color input element. Currently I have this code:

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

Unfortunately it changes the color of all divs every time the color picker is clicked. Do i need to use an array or something?

Answer 1

"append" is not a javascript standard method.

Use change event to fire new div creation

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>