为什么改变div里面的颜色不起作用？答案

【问题标题】：Why change the color inside the div does not work?为什么改变div里面的颜色不起作用？
【发布时间】：2023-03-19 08:02:01
【问题描述】：

带有 id 的 div 正在点击，带有 class 的 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>

【问题讨论】：

只是因为有class的div没有id，所以不能通过id选择。
您没有获取输入标签的值。您在 BackgroundColor(); 的第一行中获取 div 的值；函数，这是错误的。
我该如何改变这个？必须只单击 div“id”并且可以更改颜色。 div“类”中性或不点击。输入必须在 div 类中。我会有很多 div “id”，每个都需要更改颜色...？

标签： javascript input colors background click

【解决方案1】：

两个 div 的 click 事件都在触发，但您的处理程序仅在单击的 div 具有 id 时才显示警报，而第一个没有。

您还使用了真正应该 not be used anymore 的旧 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>

【讨论】：

我想改变颜色 div "id"，而不是 div "class"。 div 类应保持不单击。这完全相反
这很棒。我会有很多“身份”。通过点击“id1”或div“id2”...等...，必须更改带有输入颜色和其他值的点击diva的颜色。这就是为什么我添加了点击 ID 的获取标签名称。这还能在代码中添加什么？

【解决方案2】：

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>

最好用身份证。我想这就是你想要的。通过不断改变颜色，背景也会改变。

【讨论】：