HTML javascript函数创建元素，但无法使用其他函数找到它

我试图用Javscript/HTML编写一个拼图程序，在这个程序中，我在HTML文件页面上绘制蓝色和红色的方块。单击蓝色方块时，它们会根据其相对于红色方块的位置移动。我编写了一个方法来绘制正方形，并将它们命名为“blue1、blue2、blue3、red”等。然而，当我试图用

getElementById（“red”）

查找名为“red”的正方形并调用

getBoundingClientRect（）

时，我得到了一个错误

试图对空对象调用

getBoundingClientRect（）

我不确定为什么会是

null

，因为我在运行代码时可以看到名为“red”的方块

以下是绘制正方形的代码：

var board = [["blue3", "blue2"],["blue1", "red"]];
var dim = 2;
var width = 50;
var height = 50;

// add the squares 
function addSquares()
{
  for(var i = 0; i < dim; i++)
  {
    for(var j = 0; j < dim; j++)
    {
      // create square
      var label = j + i * dim; 
      var name = board[i][j];
      var div = document.createElement(name);
      div.style.width = width + "px";
      div.style.height = height + "px";
      div.style.left = width * j + "px";
      div.style.top = height * i + "px";
      div.style.position = "absolute";

      // determine color of square
      if(i != dim - 1 || j != dim - 1)
      {
      div.style.backgroundColor = "blue";
      }
      else
      {
        div.style.backgroundColor = "red";
      }

     document.getElementById("container").appendChild(div);

    // do something when clicked
    div.addEventListener("click", function(){getMove(this);});
    }
  }
}

“名称”与“id”不同。getElementById不会通过查找div的名称来查找该div，而是通过id来获取该div，因此它不会找到名称为“红色”且没有id的元素。您有两个选项：

其中一个：

使用getElementByName（）而不是getElementById（），使用以下行而不是导致错误的行：

var redelem = document.getElementByName('red');

或：

给每个div一个id：

您创建了元素并为其命名，因此还需要为其指定一个id，如下所示：

div.id = "red";

实际上，在代码中应该是

div.id = name;

但是我希望我的第一个示例通过向您展示您对红色div的实际需求来减少混乱。因此，您可以给每个div一个id，然后您就可以成功地使用getElementById。

name“与id”不同。getElementById不会通过查找div的名称来查找该div，而是通过id来获取该div，因此它不会找到名称为“红色”且没有id的元素。您有两个选项：

其中一个：

使用getElementByName（）而不是getElementById（），使用以下行而不是导致错误的行：

var redelem = document.getElementByName('red');

或：

给每个div一个id：

您创建了元素并为其命名，因此还需要为其指定一个id，如下所示：

div.id = "red";

实际上，在代码中应该是

div.id = name;

---

但是我想让我的第一个示例不那么让人困惑，因为它向您展示了您真正想要的红色div。因此，您可以给每个div一个id，然后您将能够成功地使用getElementById。

您从未给过它一个id，因此get元素sby id返回null。您从未给过它一个id，因此get元素sby id返回null。