Placing flags using the rightclick function for Minesweeper game

Question

still looking for additional help with this

well I'm at the end of my program of minesweeper that i built using java script so now one last thing to do is placing flags on the square that are bombs. By using the rightclick function I am getting the error of:

Error: 'document.getElementById(...)' is null or not an object

Here is the part of code that is getting it. Now my images are in a folder and the flag image is called sqt01. So i have changed the document.getElementbyId part couple of times pointing it to different images but just get that error.

//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();
                }
            }

The problem is that there is no element with the id you build. Ids are not allowed contain white spaces as well as special characters like colons. — LJᛃ, Dec 05 '14 at 02:51
so what are you telling me....i do have an element with the id as 'square' + i + ', ' + j above that in another line of code — dmbfan42, Dec 05 '14 at 03:28
Perhaps if you included the part where the ID you are trying to reference is created? — leigero, Dec 05 '14 at 03:39

score 1 · Accepted Answer · edited May 23 '17 at 10:25

1

You cannot have whitespace or commas in your dom element ID attribute (See this post for more details and references). It must start with:

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 (".")

With that I would replace your ', ' in your ID's with an '_'

Some examples of what your code needs to change to:

...

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;

...

Note, the onclick and onmousedown handlers/code generation remains the same

edited May 23 '17 at 10:25

Community

1
1

answered Dec 05 '14 at 16:00

Arthur Weborg

8,280
5
30
67

so should i replace all my commas with underscores then? – dmbfan42 Dec 06 '14 at 03:28
Almost all of your commas, for example you want `onmousedown="vRightClick(' + i + ', ' + j + ')"` to keep the comma. – Arthur Weborg Dec 06 '14 at 03:30
replace all the commas that are directly used in ID generation/access with underscores, that is. – Arthur Weborg Dec 06 '14 at 03:37
ok thanks for the information, the class that I'm in never said anything about this. So thanks again...hell you should help me with a difficulty levels in the game....lol – dmbfan42 Dec 06 '14 at 03:38
Happy to have helped -- if the info I posted solves the issue of the "Error: 'document.getElementById(...)' is null or not an object" please don't forget to select it as the answer so people know you found your solution =] Difficulty, just add more mines right? lol `while (iBomb < 8)` for easy. `while (iBomb < 16)` for medium and `while (iBomb < 24)` for hard 0=] Best of luck with the rest of your code =] – Arthur Weborg Dec 06 '14 at 03:43

Placing flags using the rightclick function for Minesweeper game

1 Answers1