I want to change the color of the clicked div element. If I change the color with the color is transferred to each next click div. How to click on the div element to change the color of that div element. First click on some div and then change color?

<html>
<head>
<style> 
html, body {
    overflow: display;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: white;
}

#some_id1{
  width: 50px;
height: 50px;
background-color: red;
}

#some_id2{
  width: 50px;
height: 50px;
background-color: red;
}

#some_id3{
  width: 50px;
height: 50px;
background-color: red;
}

#some_id4{
  width: 50px;
height: 50px;
background-color: red;
}

</style>
</head>
<body>
<input type="color" id="divbackgroundcolor" onchange="myFunction()">
<div id="some_id1"></div>
<div id="some_id2"></div>
<div id="some_id3"></div>
<div id="some_id4"></div>
<div id="some_id5"></div>

<script>

var div = document.getElementsByTagName("div");
var divCount = div.length;
for (var i = 0; i <= divCount; i += 1) {
    div[i].onclick = function(e) {
        var x = document.getElementById("divbackgroundcolor").value;
        document.getElementById(this.id).style.backgroundColor = x;
    };
}


</script>

</body>
</html>

3 Answers

0
Eden Eliel On Best Solutions

Ok, so first, I don't understand why are you using id on each div, while you are having the same style for each. better do it with class

Secondly, I have looked it up a little, and what I discovered people do, is just hide the color picker (input) and trigger it on click.

In your piece of code, it would look something like this:

var div = document.getElementsByTagName("div");
var divCount = div.length;
var clickedDivId

for (var i = 0; i < divCount; i += 1) {
    div[i].onclick = function(e) {
        clickedDivId = this.id
        document.getElementById("divbackgroundcolor").click()
    };
}

function colorChange(){
  var x = document.getElementById("divbackgroundcolor").value;
  document.getElementById(clickedDivId).style.backgroundColor = x;
}
html, body {
  overflow: display;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: white;
}
#divbackgroundcolor {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.some_style {
  width: 50px;
  height: 50px;
  background-color: red;
}
<input type="color" id="divbackgroundcolor" onchange="colorChange()">
<div class="some_style" id="some_id1"></div>
<div class="some_style" id="some_id2"></div>
<div class="some_style" id="some_id3"></div>
<div class="some_style" id="some_id4"></div>
<div class="some_style" id="some_id5"></div>

Notice that what I did is saved the id of the div I clicked on, so I could tell on which div I have clicked. Hope that is the answer you are looking for.

Good luck.

0
Anurag Srivastava On

Your code works fine, there's just an error in your loop where you loop till i <= divCount, which would be more than the length of div. Also, you don't need an onchange function on the divbackgroundcolor. See working code below.

var div = document.getElementsByTagName("div");
var divCount = div.length;
for (var i = 0; i < divCount; i += 1) { // changed to i < divCount
  div[i].onclick = function(e) {
    var x = document.getElementById("divbackgroundcolor").value;
    document.getElementById(this.id).style.backgroundColor = x;
  };
}
#some_id1 {
  width: 50px;
  height: 50px;
  background-color: red;
}

#some_id2 {
  width: 50px;
  height: 50px;
  background-color: red;
}

#some_id3 {
  width: 50px;
  height: 50px;
  background-color: red;
}

#some_id4 {
  width: 50px;
  height: 50px;
  background-color: red;
}
<input type="color" id="divbackgroundcolor">
<div id="some_id1"></div>
<div id="some_id2"></div>
<div id="some_id3"></div>
<div id="some_id4"></div>
<div id="some_id5"></div>

0
Rodrigo Faria On

Your example have only to mistakes:

In HTML remove the "onclick" in your "input"

And in JS your "for" loop use "i < divCount"

Change just those lines and will work!