javascript：結合DOM「ID」和「名稱」的錯誤

Question

當在for循環中梳理DOM調用兩個屬性（id和name）時，我遇到一些問題。

我有一個表，其中每個單元都有自己的ID，但相同的名稱屬性的HTML部分： <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(...) is null for the functions where a DOM reference with 2 attributes is used, such as: if(document.getElementById("p" + i).name=="f")

怎麼能這樣呢？還有另一種處理方法嗎？

Answer 1

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

1. name屬性：爲什麼不使用自己的標籤？像「激活」？它會更少混淆系統...

2. 庫：我會用一個庫來管理它。 jQuery工作正常。

例如，這將與id = 1返回<td>元素，只有當它被激活：

jQuery("td#p1[activated]") 

這將告訴你所選擇的元素是否已填寫或者不：

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

Answer 2

這可能只是一個複製粘貼錯誤，但您的第一個for循環缺少一個右大括號。

Answer 3

而不是使用，

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

使用此版本

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

希望幫助

Answer 4

此作品（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();