CODEWITHSUNDEEP
javascripthtmlcolor-schemecolor-picker
Ollie Williams
Ollie Williams

Reputation: 2514

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

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?

Upvotes: 0

Views: 1620

Answers (2)

kamyl
kamyl

Reputation: 6386

You can use just one event. No need to complicate things. :) Basically, you read new color and create a new div when color input value is changed. You can use input or change event, but I think change suits better, as it only fires when user has changed the value.

In your example code, you want to create div on input click, even if user won't change a color. Also, every time user clicks on it, you set new additional listener that do something when input value is changed, so after a while, 1 click does the same thing multiple times (once for every listener set so far). (Side note: It works that way, because you provide an anonymous function, which is every time treated as a different one, even if it does the same thing and has the same code)

Check this code below. It should be pretty straightforward to understand. :)

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

Upvotes: 0

Jacopo Brovida
Jacopo Brovida

Reputation: 465

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

Upvotes: 2

Related Questions