0

for ループで id と name の 2 つの属性を呼び出して DOM を組み合わせると、いくつかの問題が発生します。

テーブルを含む 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(...) は、if(document.getElementById("p" + i).name=="f") のように、2 つの属性を持つ DOM 参照が使用される関数では null です。

どうすればいいの？それを処理する別の方法はありますか？

4

4 に答える 4

0

使用する代わりに、

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

このバージョンを使用

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

それが役立つことを願っています

于 2013-06-04T12:43:39.227 に答える
0

これは機能します（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();
于 2013-06-07T11:06:40.277 に答える
0

少し異なるアプローチを使用することをお勧めします。

  1. name 属性: 独自のタグを使用しないのはなぜですか? 「活性化」のような？システムの混乱が少なくなるでしょう...

  2. ライブラリ: ライブラリを使用してそれを管理します。jQuery は正常に動作します。

たとえば、これはアクティブ化されている場合にのみ、<td>要素を返します。id = 1

jQuery("td#p1[activated]")

これにより、選択した要素がすでに入力されているかどうかがわかります。

jQuery("td#p1").is("[activated]")
于 2013-06-04T11:36:42.657 に答える
0

これは単にコピー アンド ペースト エラーである可能性がありますが、最初の for ループに右中かっこがありません。

于 2013-06-04T11:37:42.763 に答える