javascript - 为什么这会一直读取 null 而不是将我的 div 设置为不同的 id

Question

所以基本上我们正在尝试制作一个像素艺术程序，您可以在其中将“像素”分配给不同的 div 颜色。我一直返回 id 而不是重置它们，即使它们为空。我们应该在 vanilla 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 at Question 中，事件附加到 document，而不是创建的元素 element。 click 处理程序中的 event.target 是 document，而不是 element。 element 中没有设置 id。还要注意 document 中元素的 id 应该是唯一的。