如何通过单击后代块来更改颜色

Question

在目标块中动态生成一定数量的块后代，并通过鼠标单击将其填充为颜色。颜色仅在第一个块中发生变化，错误是什么？

for (i = 0; i < 50; i++) {
  var div = document.createElement('div');
  squ.appendChild(div);
  div.classList.add("color-me");
  div.style.width = 30 + "px";
  div.style.height = 30 + "px";
  div.style.float = 'left';
}
var color = document.querySelector('div.color-me')

color.onclick = function colorChange() {
  color.style.backgroundColor = 'white';
}

.square {
  width: 300px;
  height: 150px;
  background: #9acd32;
  margin: 30px;
}

<div class="square" id='squ'></div>

Answer 1

document.querySelector只返回一个元素，因此您只设置一个元素的onclick事件。您可能要使用document.querySelectorAll然后迭代每个元素以设置它的onclick属性，或者只是在创建元素时设置它。

for(i=0;i<50;i++){
	var div = document.createElement('div');
	squ.appendChild(div);
	div.classList.add("color-me");
	div.style.width=30+"px";
	div.style.height=30+"px";
	div.style.float = 'left';
	div.onclick = colorMe;
}

function colorMe(obj){
    obj.target.style.backgroundColor='white';
  
}

 .square{
	width: 300px;
	height: 150px;
	background: #9acd32;
	margin: 30px;
      }

<div class="square" id='squ'></div>

Answer 2

我建议将小方块的样式移到CSS中。

var squ = document.getElementById('squ');
var div;

for (var i = 0; i < 50; i++) {
  div = document.createElement('div');
  div.classList.add("color-me");
  div.onclick = colorChange;
  squ.appendChild(div);
}

function colorChange() {
  this.style.background = 'white';
}

#squ {
  width: 300px;
  height: 150px;
  background: #9acd32;
  margin: 30px;
}

.color-me {
  float: left;
  height: 30px;
  width: 30px;
}

<div id='squ'></div>