为什么这会持续读取null而不是将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 at Question中，事件附加到document ，而不是创建的element element 。 click处理程序中的event.target是document ，而不是element 。 没有在element上设置id 。 请注意， document中元素的id也应唯一。