minesweeper getAttribute爲null錯誤

Question

最近一直在創建掃雷並在我的JavaScript代碼的第19,39和62行中發現「無法讀取屬性'getAttribute'的未定義」錯誤。我添加了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行上，腳本調用了跨越該函數的前兩行上的cell.getAttribute（）所需的參數（單元格）而不傳遞參數（單元格）。