Почему смена цвета внутри div не работает? - PullRequest
Новая
       30

Почему смена цвета внутри div не работает?

0 голосов
/ 23 мая 2019

Div с идентификатором щелкает, div с классом не щелкает. Нажав div я хочу изменить цвет. Если цветовой ввод внутри класса div не работает, если он вне класса div, он работает нормально. Как мне это исправить? 

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>

Ответы [ 2 ]

0 голосов
/ 23 мая 2019 

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>
Лучше использовать ID. Я думаю, это то, что вы хотите. При постоянном изменении цвета фон также будет меняться.
0 голосов
/ 23 мая 2019

Событие click запускается для обоих элементов div, но ваш обработчик показывает предупреждение только в том случае, если нажатый div имеет id, которого нет у первого.

Вы также используетестарые API (getElementsByTagName и getElementsByCalssName), которые действительно больше не должны использоваться , и решение намного проще, чем то, что вы сделали: 

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