HTML javascript函数来创建元素，但无法找到它与其他功能

我想编写一个在Javscript/HTML中，在HTML文件页上绘制蓝色和红色方块搅乱难题。当点击蓝色方块时，它们根据它们相对于红色方块的位置而移动。我写了一个方法，画出正方形并将它们命名为“blue1，blue2，blue3，red”等。但是，当我尝试找到名为“red”的正方形并使用getElementById("red")并调用getBoundingClientRect()时，出现错误HTML javascript函数来创建元素，但无法找到它与其他功能

trying to call getBoundingClientRect() on a null object.

我不确定为什么它会是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); 
     } 
}

来源

2016-12-06 MLE

你从来没有给它一个id，因此得到元素sby id返回null。 –

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

或者：

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

或者：

给每一个的div的ID：

您创建的元素，给它一个名字，那么你还需要给它一个这样的ID：

div.id = "red";

其实，在你的代码应该是

div.id = name;

，但我想我的第一个例子是通过展示你你字面上想为红减少混乱DIV。所以，你可以给你的div一个id，然后你就可以成功使用getElementById了。

来源

2016-12-06 20:53:20 PaulH

HTML javascript函数来创建元素，但无法找到它与其他功能

回答

相关问题