子孫ブロックをクリックして色を変更する方法

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あなただけの1要素のonclickイベントを設定するように、一つだけの要素を返します。 document.querySelectorAllを使用して、各要素を反復処理してonclick属性を設定するか、要素の作成時に設定するだけです。

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

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

.square{ 
 
\t width: 300px; 
 
\t height: 150px; 
 
\t background: #9acd32; 
 
\t 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>