爲什麼這會保持閱讀爲空而不是將我的div設置爲不同的ID

Question

所以基本上我們正在嘗試製作一個像素藝術程序，將「像素」分配給不同的div顏色。我一直返回id而不是重置它們，即使它們爲null。我們應該在香草做這個JavaScript即使jQuery的將使其更容易顯著

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的問題，在該事件被連接到document，而不是創建的元素element。 event.target在click處理程序是document，而不是element。沒有id設定爲element。還請注意document中元素的id應該是唯一的。