Why change the color inside the div does not work?

Question

Div with the id is clicking, the div with class is not clicking. By clicking div I want to change the color. If the color input within the div class is not working, if it is out of div class it works normally. How do I fix 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) {
        if (e.target.id) alert(this.id);
  clickedDivId = this.id;
        e.stopPropagation();
    };
}  

function BackgroundColor(){
  var x = document.getElementsByClassName("backgroundcolor")[0].value;
  document.getElementById(clickedDivId).style.backgroundColor = x;
}

#divid{
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}
.divclass{
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}

<div  class="divclass">
     <input type="color" class="backgroundcolor" onchange="BackgroundColor()">
</div>
<div  id="divid"></div>

Simply because the div with class have no id, so it can't be selected by id. — FZs, May 23 '19 at 18:11
You are not fetching the value of the input tag. You’re fetching the value of the div in the first line of BackgroundColor(); function, which is wrong. — Asif Mehmood, May 23 '19 at 19:42
How can I change this? It is necessary that only the div "id" is clicked and that the color can be changed. Div "class" neutral or not clicking. The input must be in div class. I will have a lots of div "id" that needs to be changed color each...? — aldin_abdagic, May 24 '19 at 05:53

Scott Marcus · Answer 1 · 2019-05-23T18:34:53.507

The click event is firing for both divs, but your handler only shows the alert if the clicked div has an id, which the first one doesn't have.

You are also using old APIs (getElementsByTagName and getElementsByCalssName) that should really not be used anymore and the solution is much simpler that what you've done:

let color = document.querySelector(".backgroundcolor"); // Get reference to color input
let targetDiv = document.getElementById("divid"); // Get reference to second div

// Set up click event handler on the document
document.addEventListener("click", function(evt){
  // Check to see if event originated at a div
  if(evt.target.nodeName === "DIV"){
    alert("You clicked a div!"); // Act accordingly
  }
});

// Set up change event on color input
color.addEventListener("change", function(evt){
  // Set color of target div
  targetDiv.style.backgroundColor = color.value;
});

#divid{
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}



.divclass{
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}

<div  class="divclass">
     <input type="color" class="backgroundcolor">
</div>


<div  id="divid">
</div>

I want to change the color div "id", not div "class". Div class should remain without clicking. This is absolutely the opposite — aldin_abdagic, May 23 '19 at 18:28
And this is great. I'll have a lot of "id". By clicking "id1" or div "id2" ... etc ..., the color of the clicking diva with the imput color and the other value must be changed. That's why I added the get tag name of the click id. How else can this add in the code? — aldin_abdagic, May 24 '19 at 06:00

score 0 · Answer 2 · answered May 23 '19 at 19:36

function BackgroundColor(){

  var x = document.getElementById("backgroundcolor1").value;
   
  document.getElementById("clickedDivId").style.backgroundColor = x;
}

#divid{
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}
.divclass{
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}

<div id="clickedDivId" class="divclass">
     <input type="color" id="backgroundcolor1" onclick="BackgroundColor()">
</div>
<div  id="divid"></div>

It is better to use ID. I guess this is what you want. By keep changing the color the background will change as well.

Why change the color inside the div does not work?

2 Answers2

Linked