javascript - javascript: 错误组合 DOM “id” 和 “name”

Question

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

我有一个带有表格的 html 部分，其中每个单元格都有自己的 id 但具有相同的 name 属性： <td id="p1" name="f" ></td> <td id="p2" name="f" ></td> ... <td id="p47" name="f" ></td>

现在我想使用以下函数将图像随机放入这些单元格中：

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

}

然而我总是得到调试信息：

TypeError: document.getElementById(...) 对于使用具有 2 个属性的 DOM 引用的函数为 null，例如：if(document.getElementById("p" + i).name=="f")

怎么会这样？有没有其他方法可以处理它？

Answer 1

这有效（jsFiddle）：

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

这是一种更有效的方法（和jsFiddle）：

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

Answer 2

而不是使用，

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

使用这个版本

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

希望有帮助

Answer 3

我建议使用稍微不同的方法。

1. name 属性：为什么不使用自己的标签？像“激活”？对系统的混淆会更少......

2. 图书馆：我会使用图书馆来管理它。jQuery 工作正常。

例如，这将返回<td>带有 的元素id = 1，仅当它被激活时：

jQuery("td#p1[activated]")

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

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

Answer 4

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