扫雷器getAttribute of null错误

Question

最近一直在创建扫雷程序，在我的 javascript 代码的第 19、39 和 62 行遇到了 "Cannot read property 'getAttribute' of undefined" 错误。我添加了 HTML 以显示 javascript 代码从何处获取变量。

document.getElementById("begin").addEventListener("click", startGame);
let vertical;
let horizontal;
let DIFFICULTY;
let GG = false;
document.body.addEventListener('contextmenu', function(cm){e.preventDefault();});
function Winner(){
    let ckCt = document.querySelectorAll('[clicked]').length;
    let mCt = document.querySelectorAll('[mine]').length;
    let cCt = horizontal * vertical;
    if(cCt == ckCt + mCt){
        GG = true;
        return true;
    }
    return false;
}

 function acrossTheBlock(cell){
     let x = parseInt(cell.getAttribute('x'));
     let y = parseInt(cell.getAttribute('y'));
     //(x-1, y-1)  (x, y-1)  (x+1, y-1)
     //(x-1, y)    (x, y)    (x+1, y)
     //(x-1, y+1)  (x, y+1)  (x+1, y+1)
     let nw = document.getElementById((x-1) + "_" + (y-1));
     let n  = document.getElementById((x)   + "_" + (y-1));
     let ne = document.getElementById((x+1) + "_" + (y-1));
     let w  = document.getElementById((x-1) + "_" + (y));
     let e  = document.getElementById((x+1) + "_" + (y));
     let sw = document.getElementById((x-1) + "_" + (y+1));
     let s  = document.getElementById((x)   + "_" + (y+1));
     let se = document.getElementById((x+1) + "_" + (y+1));
     return [nw, n, ne, w, e, sw, s, se];
 }



function amt(count){
    let z = 0;
    let nextDoor = acrossTheBlock();
    for(var n = 0; n < nextDoor.length; n++){
        if(nextDoor[n] && nextDoor[n].hasAttribute("mine")){
            count++
        }
    }
    return count;
}

function findTheMine(e){
    if(isNewGame){ this.removeAttribute("mine"); }
    isNewGame = false;
    if(this.classList.contains('flag')) { return; }
    if(this.hasAttribute('clicked')) { return; }

    if(this.hasAttribute("mine")){
        //You lose!
        isGameOver = true;
        let bombs = document.querySelectorAll("[mine]");
        for(var i = 0; i < bombs.length; i++){
            bombs[i].className = "boom";
        }
        return;
    }

    this.setAttribute('clicked', true);
    let BOOM = amt(this);
    if(BOOM){
        this.innerHTML = BOOM;
        this.className = "c" + BOOM;
    } else {
        let nextDoor = acrossTheBlock(block);
    for(var n = 0; n < nextDoor.length; n++){
        if(nextDoor[n] && nextDoor[n].hasAttribute("mine")){
            count++
        }
    }
    }
    isWin();
}

function IThinkIFoundTheMine(yay){
    yay.preventDefault();
    if(GG) { return; }
    if(this.hasAttribute('clicked')) { return; }
    if(this.classList.contains('flag')){
        this.classList.remove('flag');
    } else {
        this.className = 'flag';
    }

}
function getDifficulty(){
    let radios = document.getElementsByName("difficulty");
    for(var i = 0; i < radios.length; i++){
        if(radios[i].checked){
            return parseFloat(radios[i].value);
        }
    }
}

function startGame(){
    vertical = parseInt(document.getElementById("vertical").value);
    horizontal = parseInt(document.getElementById("horizontal").value);
    DIFFICULTY = getDifficulty();
    isNewGame = true;
    isGameOver = false;
    //clear out old gameboard (this allows for a new game.)
    document.getElementById("minefield").innerHTML = "";
    //dynamically build table.
    var table = document.createElement("table");
    document.getElementById("minefield").appendChild(table);
    for(var r = 0; r < horizontal; r++){
        var mineRows = document.createElement("tr");
        table.appendChild(mineRows);
        for(var c = 0; c < vertical; c++){
            var textbox = document.createElement("td");
            textbox.addEventListener("click", findTheMine);
            textbox.addEventListener("contextmenu", IThinkIFoundTheMine);
            textbox.setAttribute("id", c + "_" + r);
            textbox.setAttribute("x", c);
            textbox.setAttribute("y", r);
            if(Math.random() < DIFFICULTY){
                textbox.setAttribute("mine", true);
            }
            mineRows.appendChild(textbox);
        }
    }
}

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="minesweeper.css"/>
        <title>Explosion</title>
    </head>
    <body>
        <input id="horizontal" type="number" value="10">
        <input id="vertical" type="number" value="10">
        <input name="difficulty" value=".1" type="radio">Easy
        <input name="difficulty" value=".2" type="radio" checked="true">Medium
        <input name="difficulty" value=".3" type="radio">Hard
        <input name="difficulty" value=".8" type="radio">Impossible
        <button id="begin">Good Luck</button>
        <div id="minefield"></div>
        <script type="text/javascript" src="minesweeper.js"></script>
    </body>
</html>

我该如何解决这个错误？

Answer 1

在第 39 行，脚本调用了 acrossTheBlock()，但没有传递在该函数下的前两行执行 cell.getAttribute() 所需的参数（单元格）。

扫雷器getAttribute of null错误

minesweeper getAttribute of null error

javascript

html

getattribute