Question

我正在尝试用Javscript / HTML编写一个加扰拼图，我在HTML文件页面上绘制蓝色和红色方块。单击蓝色方块时，它们会根据相对于红色方块的位置移动。我写了一个方法来绘制正方形并命名它们＆＃34; blue1，blue2，blue3，red＆＃34;然而，当我试图找到名为＆＃34; red＆＃34;使用getElementById("red")并在其上调用getBoundingClientRect()，我收到错误

尝试在空对象上调用getBoundingClientRect()。

我不确定为什么会null，因为我可以看到名为＆＃34; red＆＃34;当我运行我的代码时。

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

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

Answer 1

＆＃34;名称＆＃34;与＆＃34; id＆＃34;不同。 getElementById通过查找它的名称找不到div，它通过id获取它，因此它不会找到名称为＆＃34; red＆＃34;的元素，没有id。您有两种选择：

<强>或者：

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

或

给每个div一个id：

您创建了该元素并为其命名，因此您还需要为其指定一个ID：

div.id = "red";

实际上，在你的代码中它应该是

div.id = name;

但是我希望通过向你展示你为
想要的红色div所需要的内容来减少我的第一个例子。所以，你可以给你的div一个id，然后你就可以成功使用getElementById。

HTML javascript函数创建元素，但找不到其他函数

1 个答案: