使用掃雷遊戲中右擊功能配售標誌

Question

還在尋找更多的幫助，這

以及我在我的掃雷艦節目的最後，我使用Java腳本所以現在最後一兩件事要做建成在炸彈廣場上放置標誌。通過使用右擊功能我得到的錯誤：

錯誤：的document.getElementById（...）'爲空或不是對象

這裏是代碼是得到了部分。現在我的圖像在一個文件夾中，標誌圖像被稱爲sqt01。所以我改變了document.getElementbyId部分幾次指向不同的圖像，但只是得到那個錯誤。

//Global 
//store the value of each square 
var gaValue = new Array(8); 
for (i = 0; i <= 8; i++) { 
    gaValue[i] = new Array(8); 
} 
for (i = 0; i <= 8; i++) { 
    //loop through each item in those row 
    for (j = 0; j <= 8; j++) { 
     gaValue[i][j] = 0; 
    } 
} 
//Store the status of each square 
var gaSquare = new Array(8); 
for (j = 0; j <= 8; j++) { 
    gaSquare[j] = new Array(8); 
} 
for (j = 0; j <= 8; j++) { 
    //loop through each item in those row 
    for (i = 0; i <= 8; i++) { 
     gaSquare[i][j] = 'c'; 
    } 
} 
     //Track of whether the game is over or not (starts this with false) 
var gbGameOver = false; 

      function vInit() 
    { 
       var strHTML; 
       var i; 
       var j; 

       strHTML = "<table style='margin-left:auto;margin-right:auto'>"; 
       strHTML += "<tr><td colspan='8' style='text-align:center'>MineSweeper</td></tr>"; 
       strHTML += "<tr><td colspan='8' style='text-align:center'><input type='button' id='btnNew' value='New Game' onclick='vNewGame()'></td></tr>"; 

     //Loop through the rows to build the table of tiles 
     for (i = 0; i < 8; i++) 
     { 
      strHTML += "<tr>"; 
      for (j = 0; j < 8; j++) 

       strHTML += '<td><img src="images/sqt0.png" id="square' + i + ', ' + j + '" onclick="vClick(' + i + ', ' + j + ')" onmousedown="vRightClick(' + i + ', ' + j + ')"/></td>'; 

      strHTML += "<tr>"; 
     } 
     strHTML += '<tr><td colspan="8" style="text-align:center"><textarea id="taOut" cols="18" rows="10"></textarea></td></tr>'; 
     strHTML += "</table>"; 
     frmGrid.innerHTML = strHTML; 

     //Place bombs 
     var iBomb = 0; 
     var iRow = Math.floor(Math.random() * 8); 
     var iCol = Math.floor(Math.random() * 8); 

     while (iBomb < 8) 
     { 
      while (gaValue[iRow][iCol] == 9) 
      { 
       iRow = Math.floor(Math.random() * 8); 
       iCol = Math.floor(Math.random() * 8); 
      } 
      gaValue[iRow][iCol] = 9; 
      iBomb++; 
     } 
     //Calculate clue values around mines 
     var iMine = 0; 
     for (i = 0; i < 8; i++) 
     { 
      for (j = 0; j < 8; j++) 
      { 
       for (k = (i - 1) ; k <= (i + 1) ; k++) 
        for (m = (j - 1) ; m <= (j + 1) ; m++) 
         if (k >= 0 && k <= 7 && j >= 0 && j <= 7) 
          if (gaValue[k][m] == 9) 
           iMine++; 
       if (gaValue[i][j] != 9) 
        gaValue[i][j] = iMine; 
       iMine = 0; 
      } 
     } 
    } 
    //Get the ID of the image I need to change 
    function vClick(iRow, iCol) 
    { 
     var strID = "square" + iRow + ", " + iCol; 
     var strOut = "Gameover"; 

     if (gbGameOver == false) 
     { 

      gaSquare[iRow][iCol] = 'o'; 
      document.getElementById(strID).src = "images/" + gaValue[iRow][iCol] + ".png"; 

      if (gaValue[iRow][iCol] == 9) 
      { 
       document.getElementById('taOut').value = strOut; 
       vOver(); 
      } 
      if (gaValue[iRow][iCol] == 0) 
      { 
       vZero2(iRow, iCol); 
      } 
     } 
    } 

    //GameOver  
    function vOver()  
    { 
     var i; 
     var j; 
     var strID; 

     for (i = 0; i < 8; i++) 
      for (j = 0; j < 8; j++) 
      { 
       strID = "square" + i + ", " + j; 
       document.getElementById(strID).src = "images/" + gaValue[i][j] + ".png"; 
      } 
    } 
//Clearing area 
    function vZero2(iRow, iCol) 
    { 
     var i; 
     var j; 
     for (i = iRow - 1; i <= (iRow + 1) ; i++) 
     { 
      for (j = iCol - 1; j <= iCol + 1; j++) 
      { 
       if (i >= 0 && i < 8 && j >= 0 && j < 8) 
        if (gaSquare[i][j] != 'o') 
         vClick(i, j); 
      } 
     } 
    } 

//Start new game 
    function vNewGame() 
    {  
     for (i = 0; i < 8; i++) 
      for (j = 0; j < 8; j++) 
      { 
       gaValue[i][j] = 0; 
       gaSquare[i][j] = 'c'; 
       document.getElementById('square' + i + ', ' + j).src = 'images/sqt0.png'; 
      } 
     gbGameOver = false; 
     vInit(); 
    }    
     //no menu on right click 
    function bIsRightButtonClicked(e) { 
     var rightclick = false; 
     e = e || window.event; 
     if (e.which) { 
      rightclick = (e.which == 3); 
     } else if (e.button) { 
      rightclick = (e.button == 2); 
     } 
     return rightclick; 
    } 
//Getting Flag when you right click 
     function vRightClick(iRow, iCol, e) 
     { 
      if (bIsRightButtonClicked(e)) 
      { 
       gaSquare[iRow][iCol] = 'c'; 
       gaSquare[iRow][iCol] = 'f'; 
       document.getElementById('square' + i + ', ' + j).src = 'images/sqt1.png'; // Error: 'document.getElementById(...)' is null or not an object 
       vOver(); 
      } 
     } 


    //Getting Flag when you right click 
      function vRightClick(iRow, iCol, e) 
      { 
       if (bIsRightButtonClicked(e)) 
       { 
        gaSquare[iRow][iCol] = 'c'; 
        gaSquare[iRow][iCol] = 'f'; 
        document.getElementById('square' + i + ', ' + j).src = 'images/sqt1.png'; // Error: 'document.getElementById(...)' is null or not an object 
        vOver(); 
       } 
      } 

Answer 1

您的dom元素ID屬性中不能有空格或逗號（請參閱this post for more details and references）。它必須先從：

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".")

有了，我會取代你的「」您的帳號與一個‘_’

的代碼需要改變什麼的一些例子：

... 

strHTML += '<td><img src="images/sqt0.png" id="square' + i + '_' + j + 
    '" onclick="vClick(' + i + ', ' + j + 
    ')" onmousedown="vRightClick(' + i + ', ' + j + ')"/></td>'; 

... 

document.getElementById('square' + i + '_' + j) 

... 

var strID = "square" + iRow + "_" + iCol; 

... 

注意，onclick和onmousedown處理程序/代碼生成保持不變