なぜ私のdivを別のIDの

Question

に設定するのではなく、nullを読み続けるのですか？基本的に、異なるdiv色に「ピクセル」を割り当てるピクセルアートプログラムを作成しようとしています。彼らがヌルであっても、私はそれらをリセットするのではなく、IDを返すようにしています。私たちは質問でイベントがdocument、いない作成された要素elementに添付されたjQueryのJavaScriptのでは、それは非常に容易

document.addEventListener("DOMContentLoaded",() => { 

    console.log("dom content loaded"); 
    //sets up div for loop. 

    function divAdder() { 
    var pixelContainer = document.createElement("div"); 
    pixelContainer.setAttribute("class", "pixelContainer"); 
    document.body.appendChild(pixelContainer); 

     //creates and numbers divs 
    for (var i = 0; i < 1073; i++) { 

     var id = "Div ID #"; 
     var element = document.createElement("div"); 

     element.setAttribute("class", "pixelClass"); 
     document.addEventListener("click",colorPicker); 
     document.addEventListener("click",colorSet); 
     pixelContainer.appendChild(element); 

    } 
    } 
divAdder() 

var currentColor = undefined 
    function colorPicker(event) { 
     currentColor = event.target.getAttribute("id") 
     console.log("currentColor = " + currentColor) 
    } 

    function colorSet(event){ 
    console.log("colorSet = " + currentColor) 
    event.target.setAttribute("id", currentColor) 

    }; 

Answer 1

になるだろうにもかかわらず、JavaScriptのバニラでこれをやっていることになっています。 event.target内のclickハンドラはdocumentで、elementではありません。 No idはelementに設定されています。 documentの要素のidも一意である必要があります。