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

【问题标题】：HTML javascript function to create element, but cannot find it with other function用于创建元素的 HTML javascript 函数，但无法使用其他函数找到它
【发布时间】：2016-12-06 20:36:49
【问题描述】：

我正在尝试用 Javscript/HTML 编写一个加扰谜题，其中我在 HTML 文件页面上绘制蓝色和红色方块。当点击蓝色方块时，它们会根据它们相对于红色方块的位置移动。我编写了一个绘制正方形并将它们命名为“blue1、blue2、blue3、red”等的方法。但是，当我尝试使用getElementById("red") 找到名为“red”的正方形并在其上调用getBoundingClientRect() 时，我得到一个

的错误

试图在一个空对象上调用getBoundingClientRect()。

我不确定为什么会是 null，因为我在运行代码时可以看到名为“红色”的方块。

这是绘制正方形的代码：

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，因此get element sby id返回null。

标签： javascript html

【解决方案1】：

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

任一：

使用 getElementByName() 而不是 getElementById()，使用以下行而不是导致错误的行：
```
var redelem = document.getElementByName('red');
```

或者：

给每个 div 一个 id：

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

div.id = "red";

其实在你的代码中应该是

div.id = name;

但我希望我的第一个示例通过向您展示您对红色 div 的字面意思 想要什么来减少混淆。因此，您可以为每个 div 分配一个 id，然后您就可以成功使用 getElementById。

【讨论】：