javascript - 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);});
    }
  }
}

这是getMove()的代码，一旦我调用var red = redelem.getBoundingClientRect();，就会出现错误

function getMove(elem) {
    var move = elem.getBoundingClientRect();
    var redelem = document.getElementById('red');
    var red = redelem.getBoundingClientRect();

    mwcenter = 0.5 * (move.right + move.left);
    mhcenter = 0.5 * (move.bottom + move.top);
    rwcenter = 0.5 * (red.right + red.left);
    rhcenter = 0.5 * (red.bottom + red.top);

      if (mwcenter - rwcenter == 50 && mhcenter == rhcenter)
      {
        leftPress(elem);
        rightPress(redelem);
      }

      else if (mwcenter - rwcenter == -50 && mhcenter == rhcenter)
      {
        rightPress(elem);
        leftPress(redelem);
      }

      else if (mhcenter - rhcenter == 50 && mwcenter == rwcenter)
      {
        upPress(elem);
        downPress(redelem);
      }

      else if (mhcenter - rhcenter == -50 && mwcenter == rwcenter)
      {
        downPress(elem);
        upPress(redelem);
      }
}

最佳答案

“名称”与“ id”不同。 getElementById不会通过查找其名称来查找div，而是通过id来获取它，因此它将找不到没有id的名称为“ red”的元素。您有两种选择：

要么：


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

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

要么：


给每个div一个ID：


您已经创建了元素并为其指定了名称，因此还需要为其提供一个ID，如下所示：

div.id = "red";

实际上，在您的代码中

div.id = name;

但是我希望我的第一个示例通过向您展示红色div的字面意思来减少混乱。因此，您可以为每个div分配一个ID，然后便可以成功使用getElementById。