javascript:组合DOM时出错“；id"；及；名称“；

在for循环中，当组合调用两个属性（id和name）的DOM时，我遇到了一些问题

我有一个带有表的html部分，其中每个单元格都有自己的id，但名称属性相同：

...

现在我想通过以下功能将图像随机放入这些单元格：

 function begintest () {
    var i;
    var randnum;
    var randnum2;
    for(i=1;i<48;i++) {document.getElementById("p" + i).name="f";
    for(i=1;i<22;i++) { 
        randnum = Math.floor(Math.random() * 6) + 1;    //picture of one sort
        randnum2 = Math.floor(Math.random() * 47) + 1;  //random position between 1-47
        while(document.getElementById("p" + randnum2).name=="t") {  //check whether position taken
            randnum2 = Math.floor(Math.random() * 47) + 1;  //random position between 1-47
        }
        document.getElementById("p" + randnum2).name = "t"; //true
        document.getElementById("p" + randnum2).style.backgroundImage = "url(i" + randnum + ".png)"; //put in image first sort
    }

    for(i=1;i<48;i++) { //picture of second sort
        if(document.getElementById("p" + i).name=="f") {    //if not filled with first sort
            randnum = Math.floor(Math.random() * 26) + 7;   //take second sort
            document.getElementById("p" + i).style.backgroundImage = "url(i" + randnum + ".png)"; //put in image second sort
        }
    }

}

函数beginest（）{
var i；
var randnum；
var randnum2；
对于（i=1；i我建议使用稍微不同的方法

名称属性：为什么不使用您自己的标记？如“已激活”？这将减少对系统的混淆

库：我会用一个库来管理它。jQuery很好用

例如，这将返回id为1的
元素，仅当它被激活时：

jQuery("td#p1[activated]")

这将告诉您所选元素是否已填写：

jQuery("td#p1").is("[activated]")

这可能只是复制粘贴错误，但您的第一个for循环缺少右大括号。
而不是使用

if(document.getElementById("p" + i).name=="f")

使用此版本

if(document.getElementById("p" + i).getAttribute("name") =="f" )

希望这有助于这项工作（）：

函数beginest（）{
var i，
随机图像，
兰多姆，
P
对于（i=1；i<48；i+=1）{
p=document.getElementById（'p'+i）；
p、 name='f'；//使用name属性作为标志
}
对于（i=1；i<22；i+=1）{
//检查位置是否正确
而（p.name！=“t”）{
randomImage=Math.floor（Math.random（）*6）+1；//一种类型的图片
p、 名称='t'；
p、 style.backgroundImage='url（i'+randomImage+'.png）；//将图像放在第一个排序中
p、 innerText=p.style.backgroundImage；
randomP=Math.floor（Math.random（）*47）+1；//1-47之间的随机位置
p=document.getElementById（'p'+randomP）；//缓存DOM查找
}
}
对于（i=1；i<48；i+=1）{//第二类图片
p=document.getElementById（'p'+i）；//缓存DOM查找
if（p.name==“f”）{//if未填入第一个排序
randomImage=Math.floor（Math.random（）*26）+7；//进行第二次排序
p、 style.backgroundImage='url（i'+randomImage+'.png）；//将图像放入第二个排序
p、 innerText=p.style.backgroundImage；
}
}
}
beginest（）；

以下是一种更有效的方法（以及）：

函数beginest（）{
var i，
随机图像，
兰多姆，
P
randArr=[]；
对于（i=1；i<48；i+=1）{
p=document.getElementById（'p'+i）；
p、 innerText=p.id//从视觉上区分哪些p元素没有背景图像
随机推力（i）；
}
随机排序（函数（a，b）{
var randA=Math.floor（Math.random（）*47）+1，
randB=Math.floor（Math.random（）*47）+1；
返回randA-randB；
});
对于（i=0；i
代码本身没有问题。如果document.getElementById返回
null
，这意味着它没有找到元素。尝试访问
null
的任何属性都将抛出错误。完全正确。非常感谢！何时何地调用
begintest（）
？它可能在DOM准备好之前被调用。好吧，现在我感到惭愧…我确实打了个错字。我只是在jQuery中使用了两次id=42，但错过了id=41：我在另一个平台中使用html平台–它不支持jQuery。但是你的建议确实容易多了！
function beginTest() {
    var i,
        randomImage,
        randomP,
        p;
    for (i = 1; i < 48; i += 1) {
        p = document.getElementById('p' + i);
        p.name = 'f';       // using the name attribute as a flag
    }
    for (i = 1; i < 22; i += 1) {
        //check whether position taken
        while (p.name !== 't') {
            randomImage = Math.floor(Math.random() * 6) + 1;    // picture of one sort
            p.name = 't';
            p.style.backgroundImage = 'url(i' + randomImage + '.png)';  // put in image first sort
            p.innerText = p.style.backgroundImage;
            randomP = Math.floor(Math.random() * 47) + 1;       // random position between 1-47
            p = document.getElementById('p' + randomP);         // cache DOM lookup
         }
    }
    for (i = 1; i < 48; i += 1) {                               // picture of second sort
        p = document.getElementById('p' + i);                   // cache DOM lookup
        if (p.name=="f") {        // if not filled with first sort
            randomImage = Math.floor(Math.random() * 26) + 7;       // take second sort
            p.style.backgroundImage = 'url(i' + randomImage + '.png)';  //put in image second sort
            p.innerText = p.style.backgroundImage;
        }
    }
}
beginTest();

function beginTest() {
    var i,
        randomImage,
        randomP,
        p,
        randArr =[];
    for (i = 1; i < 48; i += 1) {
        p = document.getElementById('p' + i);
        p.innerText = p.id  // visually distinguish which p elements do not have a background image
        randArr.push(i);
    }
    randArr.sort(function (a, b) {
        var randA = Math.floor(Math.random() * 47) + 1,
            randB = Math.floor(Math.random() * 47) + 1;
        return randA - randB;
    });
    for (i = 0; i < randArr.length; i += 1) {
        randomImage = Math.floor(Math.random() * 6) + 1;    // picture of one sort
        p = document.getElementById('p' + randArr[i]);         // cache DOM lookup
        p.style.backgroundImage = 'url(i' + randomImage + '.png)';  // put in image first sort
        p.innerText = p.style.backgroundImage;
     }
}
beginTest();