2 
var n1 = document.getElementById("n1").style["background-color"];

キャッチされていない TypeError: null のプロパティ 'style' を読み取れません

テーブルセルの背景色を変更しようとしましたが、それがわかりました。それだけでなく、READ できないと表示されていますが、実際には WRITE できます (同じ方法で背景色を変更できますが、その値を読み取ることはできません)。

コード：

function checkDiagonal() {
    var n1 = document.getElementById("n1").style["background-color"];
    var n2 = document.getElementById("n2").style["background-color"];
    var n3 = document.getElementById("n3").style["background-color"];
    var n4 = document.getElementById("n4").style["background-color"];
    var n5 = document.getElementById("n5").style["background-color"];
    var n6 = document.getElementById("n6").style["background-color"];
    var n7 = document.getElementById("n7").style["background-color"];
    var n8 = document.getElementById("n8").style["background-color"];
    var n9 = document.getElementById("n9").style["background-color"];
    var n10 = document.getElementById("n10").style["background-color"];
    if (n1!=='000000' || n2!=='000000' || n3!=='000000' || n4!=='000000' || n5!=='000000' || n6!=='000000' || n7!=='000000' || n8!=='000000' || n9!=='000000' || n10!=='000000')
    {
        return;
    } else {
        var winner='Nobody';
        if (n1 == n2 && n2 == n3) { winner=n3; }    
        if (n1 == n4 && n4 == n7) { winner=n7; }    
        if (n1 == n5 && n5 == n9) { winner=n9; }    
        if (n2 == n5 && n5 == n8) { winner=n8; }    
        if (n3 == n5 && n5 == n7) { winner=n7; }    
        if (n3 == n6 && n6 == n9) { winner=n9; }    
        if (n4 == n5 && n5 == n6) { winner=n6; }    
        if (n7 == n8 && n8 == n9) { winner=n9; }
        if (winner=='Nobody') {
            document.getElementById("n1").style["background-color"]="FFFFFF";
            document.getElementById("n4").style["background-color"]="FFFFFF";
            document.getElementById("n7").style["background-color"]="FFFFFF";
            document.getElementById("n8").style["background-color"]="FFFFFF";
            document.getElementById("n9").style["background-color"]="FFFFFF";
        }
    }
}
var st = new playerTurnObj(); //Pointless to explain this, it has nothing to do
</script>
</head><body>
<table align="center" border=0>
<tr align="center"><td id="n1" style="background-color:000000" onclick="switchTurnGen(st); mark('n1'); checkDiagonal('n1');"></td><td id="n2" style="background-color:000000" onclick="switchTurnGen(st); mark('n2'); checkDiagonal('n2');"></td><td id="n3" style="background-color:000000" onclick="switchTurnGen(st); mark('n3'); checkDiagonal('n3');"></td></tr>
<tr align="center"><td id="n4" style="background-color:000000" onclick="switchTurnGen(st); mark('n4'); checkDiagonal('n4');"></td><td id="n5" style="background-color:000000" onclick="switchTurnGen(st); mark('n5'); checkDiagonal('n5');"></td><td id="n6" style="background-color:000000" onclick="switchTurnGen(st); mark('n6'); checkDiagonal('n6');"></td></tr>
<tr align="center"><td id="n7" style="background-color:000000" onclick="switchTurnGen(st); mark('n7'); checkDiagonal('n7');"></td><td id="n8" style="background-color:000000" onclick="switchTurnGen(st); mark('n8'); checkDiagonal('n8');"></td><td id="n9" style="background-color:000000" onclick="switchTurnGen(st); mark('n9'); checkDiagonal('n9');"></td></tr>
</table>
</body></html>

編集：私は問題を発見しました。問題は ID n10 にあり、n9 までは ID しかないため、n10 は明らかにエラーを引き起こしました。それから質問してすみません

4

2 に答える 2

1

編集

だから、私の最初の仮定は正しかった。編集したコードには、明らかに要素がありませid="n10"んが、このコード行があります

var n10 = document.getElementById("n10").style["background-color"];

グリッドから数値がクリックされたときに、どのjsFiddle がエラー時に指すか。

編集前からの回答

問題は、 の要素がないことですid="n1"。ここでエラーのこの再現を参照してください: jsfiddle デモ

正しいIDをターゲットにするか、要素が存在する前にこのコードが実行される場合は、onload

var n1;
window.onload = function(){ 
 n1 = document.getElementById("n1").style["background-color"]; 
};
于 2013-05-19T20:17:55.037 に答える