Clever Geek Handbook

I cannot change images in the first or last row of the table

I am trying to do photo sharing. there are 16 squares, but for some reason I cannot go to the last or first row of the 2d array of table cells.

Does anyone see my problem? this is my Javascript:

var cellArray;
var knight = "<img src=\"Knight.png" + "\">";
var pit =  "<img src=\"Pit.png" + "\">";
var princess = "<img src=\"princess.png" + "\">";

function makeCells()
{
cellArray = new Array(
[
    document.getElementById("c1"),
    document.getElementById("c2"),
    document.getElementById("c3"),
    document.getElementById("c4")],
[   document.getElementById("c5"),
    document.getElementById("c6"),
    document.getElementById("c7"),
    document.getElementById("c8")],
[   document.getElementById("c9"),
    document.getElementById("c10"),
    document.getElementById("c11"),
    document.getElementById("c12")],
[   document.getElementById("c13"),
    document.getElementById("c14"),
    document.getElementById("c15"),
    document.getElementById("c16")
]);
placePictures();   
}

function placePictures()
{
   // var princess = document.createElement("img");
   // princess.src = "princess.png";
   // var pit = document.createElement("img");
  //  pit.src = "Pit.png";

//var randomArrayElement = Math.floor(Math.random() * (16));

for(i = 0; i < 4; i++)
{
    for(j = 0; j < 4; j++)
    {
        if(i == 0 && j == 0)
        {
            cellArray[i][j].innerHTML = knight;;
            for(k = 0; k < 3; k++)
            {
                var row = Math.floor(Math.random() * (3));
                var col = Math.floor(Math.random() * (3));
                if(row !== 0 && col !== 0 || row !== col || row !== 3 && col !== 3)
                    cellArray[row][col].innerHTML = pit;
            }
        }
        if(i == 3 && j == 3)
        {
             cellArray[i][j].innerHTML = princess;
        }
    }
}

for(i = 0; i < 4; i++)
{
    for(j = 0; j < 4; j++)
    {
        if(cellArray[i][j].innerHTML == "")
        cellArray[i][j].innerHTML = "<img src = Floor.png>";
    }
}
}

 function clickIt(row, col)
 {
var top = (row - 1);
var bottom = (row + 1);
var left = (col - 1);
var right = (col + 1);
var temp = cellArray[row][col].innerHTML; 

if(cellArray[top][col].innerHTML === knight && cellArray[row][col].innerHTML !== pit)
{
    cellArray[row][col].innerHTML = cellArray[top][col].innerHTML;
    cellArray[top][col].innerHTML = temp;
}
else if(cellArray[bottom][col].innerHTML === knight && cellArray[row][col].innerHTML !== pit)
{
    cellArray[row][col].innerHTML = cellArray[bottom][col].innerHTML;
    cellArray[bottom][col].innerHTML = temp;
}
else if(cellArray[row][left].innerHTML === knight && cellArray[row][col].innerHTML !== pit)
{
    cellArray[row][col].innerHTML = cellArray[row][left].innerHTML;
    cellArray[row][left].innerHTML = temp;
}
else if(cellArray[row][right].innerHTML === knight && cellArray[row][col].innerHTML !== pit)
{
    cellArray[row][col].innerHTML = cellArray[row][right].innerHTML;
    cellArray[row][right].innerHTML = temp;
}
else
{
    alert("NOPE");
}
alert("End");
}

HTML:

<html>
    <head>
        <title>Maze Runner</title>
        <script src="javascriptMazeRunner.js"></script>
        <link rel="stylesheet" type="text/css" href="MazeRunnerCSS.css"/>
    </head>
    <body onload="makeCells()">
        <form id="MainForm">
            <table id="MazeTable">
                <tr id="Row1">
                    <td id="c1" class="Blue" onclick="clickIt(0,0)"></td>
                    <td id="c2" class="Blue" onclick="clickIt(0,1)"></td>
                    <td id="c3" class="Blue" onclick="clickIt(0,2)"></td>
                    <td id="c4" class="Blue" onclick="clickIt(0,3)"></td>
                </tr>
                <tr id="Row2">
                    <td id="c5" class="Blue" onclick="clickIt(1,0)"></td>
                    <td id="c6" class="Blue" onclick="clickIt(1,1)"></td>
                    <td id="c7" class="Blue" onclick="clickIt(1,2)"></td>
                    <td id="c8" class="Blue" onclick="clickIt(1,3)"></td>
                </tr>
                <tr id="Row3">
                    <td id="c9" class="Blue" onclick="clickIt(2,0)"></td>
                    <td id="c10" class="Blue" onclick="clickIt(2,1)"></td>
                    <td id="c11" class="Blue" onclick="clickIt(2,2)"></td>
                    <td id="c12" class="Blue" onclick="clickIt(2,3)"></td>
                </tr>
                <tr id="Row4">
                    <td id="c13" class="Blue" onclick="clickIt(3,0)"></td>
                    <td id="c14" class="Blue" onclick="clickIt(3,1)"></td>
                    <td id="c15" class="Blue" onclick="clickIt(3,2)"></td>
                    <td id="c16" class="Blue" onclick="clickIt(3,3)"></td>
                </tr>
            </table>    
        </form>
    </body>
</html>
+3


source to share


2 answers


I found that your top, bottom and right variables cross the border of the cellArray (top becomes -1 and bottom, right becomes 4), I recommend you try this code and change it based on your request:



var cellArray;
            var knight = "<img src=\"Knight.png" + "\">";
            var pit = "<img src=\"Pit.png" + "\">";
            var princess = "<img src=\"princess.png" + "\">";

            function makeCells()
            {
                cellArray = new Array(
                        [
                            document.getElementById("c1"),
                            document.getElementById("c2"),
                            document.getElementById("c3"),
                            document.getElementById("c4")],
                        [document.getElementById("c5"),
                            document.getElementById("c6"),
                            document.getElementById("c7"),
                            document.getElementById("c8")],
                        [document.getElementById("c9"),
                            document.getElementById("c10"),
                            document.getElementById("c11"),
                            document.getElementById("c12")],
                        [document.getElementById("c13"),
                            document.getElementById("c14"),
                            document.getElementById("c15"),
                            document.getElementById("c16")
                        ]);
                placePictures();
            }

            function placePictures()
            {
                // var princess = document.createElement("img");
                // princess.src = "princess.png";
                // var pit = document.createElement("img");
                //  pit.src = "Pit.png";

//var randomArrayElement = Math.floor(Math.random() * (16));

                for (i = 0; i < 4; i++)
                {
                    for (j = 0; j < 4; j++)
                    {
                        if (i == 0 && j == 0)
                        {
                            cellArray[i][j].innerHTML = knight;
                            ;
                            for (k = 0; k < 3; k++)
                            {
                                var row = Math.floor(Math.random() * (3));
                                var col = Math.floor(Math.random() * (3));
                                if (row !== 0 && col !== 0 || row !== col || row !== 3 && col !== 3)
                                    cellArray[row][col].innerHTML = pit;
                            }
                        }
                        if (i == 3 && j == 3)
                        {
                            cellArray[i][j].innerHTML = princess;
                        }
                    }
                }

                for (i = 0; i < 4; i++)
                {
                    for (j = 0; j < 4; j++)
                    {
                        if (cellArray[i][j].innerHTML == "")
                            cellArray[i][j].innerHTML = "<img src = Floor.png>";
                    }
                }
            }

            function clickIt(row, col)
            {
                var top = (row - 1);
                var bottom = (row + 1);
                var left = (col - 1);
                var right = (col + 1);
                var temp = cellArray[row][col].innerHTML;
                
                if(top < 0)
                    top = 0;
                if(bottom >= cellArray[row].length)
                    bottom = cellArray[row].length-1;
                if(right >= cellArray[row].length)
                    right = cellArray[row].length-1;

                if (cellArray[top][col].innerHTML === knight && cellArray[row][col].innerHTML !== pit)
                {
                    cellArray[row][col].innerHTML = cellArray[top][col].innerHTML;
                    cellArray[top][col].innerHTML = temp;
                } else if (cellArray[bottom][col].innerHTML === knight && cellArray[row][col].innerHTML !== pit)
                {
                    cellArray[row][col].innerHTML = cellArray[bottom][col].innerHTML;
                    cellArray[bottom][col].innerHTML = temp;
                } else if (cellArray[row][left].innerHTML === knight && cellArray[row][col].innerHTML !== pit)
                {
                    cellArray[row][col].innerHTML = cellArray[row][left].innerHTML;
                    cellArray[row][left].innerHTML = temp;
                } else if (cellArray[row][right].innerHTML === knight && cellArray[row][col].innerHTML !== pit)
                {
                    cellArray[row][col].innerHTML = cellArray[row][right].innerHTML;
                    cellArray[row][right].innerHTML = temp;
                } else
                {
                    alert("NOPE");
                }
                alert("End");
            }
makeCells();
      

        
        
        
      

    
    <form id="MainForm">
            <table id="MazeTable">
                <tr id="Row1">
                    <td id="c1" class="Blue" onclick="clickIt(0, 0)"></td>
                    <td id="c2" class="Blue" onclick="clickIt(0, 1)"></td>
                    <td id="c3" class="Blue" onclick="clickIt(0, 2)"></td>
                    <td id="c4" class="Blue" onclick="clickIt(0, 3)"></td>
                </tr>
                <tr id="Row2">
                    <td id="c5" class="Blue" onclick="clickIt(1, 0)"></td>
                    <td id="c6" class="Blue" onclick="clickIt(1, 1)"></td>
                    <td id="c7" class="Blue" onclick="clickIt(1, 2)"></td>
                    <td id="c8" class="Blue" onclick="clickIt(1, 3)"></td>
                </tr>
                <tr id="Row3">
                    <td id="c9" class="Blue" onclick="clickIt(2, 0)"></td>
                    <td id="c10" class="Blue" onclick="clickIt(2, 1)"></td>
                    <td id="c11" class="Blue" onclick="clickIt(2, 2)"></td>
                    <td id="c12" class="Blue" onclick="clickIt(2, 3)"></td>
                </tr>
                <tr id="Row4">
                    <td id="c13" class="Blue" onclick="clickIt(3, 0)"></td>
                    <td id="c14" class="Blue" onclick="clickIt(3, 1)"></td>
                    <td id="c15" class="Blue" onclick="clickIt(3, 2)"></td>
                    <td id="c16" class="Blue" onclick="clickIt(3, 3)"></td>
                </tr>
            </table>    
        </form>
Run codeHide result


I hope this work :)

+1


source


from what I can notice in your code, whenever any border lines for ex: ID "C1" are clicked, the line is:

cellArray[top][col].innerHTML

would mean



cellArray[-1][-1].innerHTML

which is rather an invalid reference and that will cause the script to crash rather than subsequent execution, thus contributing to your problem.

+1


source






More articles:


All Articles