Размещение флагов с помощью функции RightClick для игры Сапер

Question

все еще ищет дополнительную помощь с этим

ну я в конце моей программы тральщик, который я построил с помощью Java Script, так что теперь одну вещь, чтобы сделать размещает на площади флаги, которые являются бомбами. С помощью функции RightClick я получаю ошибку:

Ошибка: «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 (см. 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 обработчики генерации/код остается тем же самым