javascript - 我无法交换表格第一行或最后一行的图像-6ren

javascript - 我无法交换表格第一行或最后一行的图像

转载作者：可可西里更新时间：2023-11-01 13:23:03

我正在尝试交换图片。有 16 个正方形，但是由于某种原因我无法移动到二维表格单元格数组的最后一行或第一行。

有没有人看到我的问题？这是我的 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>

最佳答案

我发现你的top,bottom,right变量越过了cellArray的边界(top变为-1，bottom,right变为4)，我建议你试试这段代码，并根据你的需求修改:

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>

我希望这个工作:)

关于javascript - 我无法交换表格第一行或最后一行的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43702788/

文章推荐： php - Yii - 如何访问主配置中的基本 URL

文章推荐： php - 使用 Zend Framework 2 扩展 ZfcUser

文章推荐： SQL 服务器 : max date and inner join

java - 无法 Autowiring
我通过 spring ioc 编写了一些 Rest 应用程序。但我无法解决这个问题。这是我的异常(exception): org.springframework.beans.factory.BeanC
java - 无法@Autowire配置
我对 TestNG、Spring 框架等完全陌生，我正在尝试使用注释 @Value通过 @Configuration 访问配置文件注释。我在这里想要实现的目标是让控制台从配置文件中写出“hi”，通过
无法 malloc 然后转到程序顶部
为此工作了几个小时。我完全被难住了。这是 CS113 的实验室。如果用户在程序(二进制计算器)结束时选择继续，我们需要使用 goto 语句来到达程序的顶部。但是，我们还需要释放所有分配的内存。
无法 avformat_open_input .mp3
我正在尝试使用 ffmpeg 库构建一个小的 C 程序。但是我什至无法使用 avformat_open_input() 打开音频文件设置检查错误代码的函数后，我得到以下输出: Error code:
java - 无法 Autowiring
使用 Spring Initializer 创建一个简单的 Spring boot。我只在可用选项下选择 DevTools。创建项目后，无需对其进行任何更改，即可正常运行程序。现在，当我尝试在项目
macos - 无法 brew 链接qt
所以我只是在 Mac OS X 中通过 brew 安装了 qt。但是它无法链接它。当我尝试运行 brew link qt 或 brew link --overwrite qt 我得到以下信息: ton
git - 无法 pull 或提交
我在提交和 pull 时遇到了问题:在提交的 IDE 中，我看到: warning not all local changes may be shown due to an error: unable
gcc - 无法 grep 特定格式的文本
我跑 man gcc | grep "-L" 我明白了 Usage: grep [OPTION]... PATTERN [FILE]... Try `grep --help' for more inf
curl - 无法 CURL 远程文件
我有一段代码，旨在接收任何 URL 并将其从网络上撕下来。到目前为止，它运行良好，直到有人给了它这个 URL: http://www.aspensurgical.com/static/images/a
WireGuard - 无法 ping 服务器或解析域
在过去的 5 个小时里，我一直在尝试在我的服务器上设置 WireGuard，但在完成所有设置后，我无法 ping IP 或解析域。下面是服务器配置 [Interface] Address = 10.
GitLab:无法 fork 我自己的项目
我正在尝试在 GitLab 中 fork 我的一个私有(private)项目，但是当我按下 fork 按钮时，我会收到以下信息: No available namespaces to fork the
javascript - 无法 GET/定义路由
我这里遇到了一些问题。我是 node.js 和 Rest API 的新手，但我正在尝试自学。我制作了 REST API，使用 MongoDB 与我的数据库进行通信，我使用 Postman 来测试我的路
javascript - 无法 AppendChild - 尝试使一个方法在不同的类中附加另一个方法
下面的代码在控制台中给出以下消息: Uncaught DOMException: Failed to execute 'appendChild' on 'Node': The new child el
javascript - 数组被视为对象，无法 NgFor
我正在尝试调用一个新端点来显示数据，我意识到在上一组有效的数据中，它在数据周围用一对额外的“[]”括号进行控制台，我认为这就是问题是，而新端点不会以我使用数据的方式产生它! 这是 NgFor 失败的原
git - 无法 checkout 到无效路径
我正在尝试将我的 Symfony2 应用程序部署到我的 Azure Web 应用程序，但遇到了一些麻烦。推送到远程时，我在终端中收到以下消息 remote: Updating branch 'mas
docker - Minikube具有IP-无法 curl
Minikube已启动并正在运行，没有任何错误，但是我无法 curl IP。我在这里遵循:https://docs.traefik.io/user-guide/kubernetes/，似乎没有提到关闭
linux - 无法 docker 组成任何项目
每当我尝试docker组成任何项目时，都会出现以下错误。我尝试过有和没有sudo 我在这台机器上只有这个问题。我可以在Mac和Amazon WorkSpace上运行相同的容器。 (myslabs)
python - 无法 pip 安装手电筒
我正在尝试 pip install stanza 并收到此消息: ERROR: No matching distribution found for torch>=1.3.0 (from stanza
kubernetes 无法 ping 通其他服务
DNS 解析看起来不错，但我无法 ping 我的服务。可能是什么原因？来自集群中的另一个 Pod: $ ping backend PING backend.default.svc.cluster.l
spring - 无法 Autowiring 字段
我正在使用Hibernate 4 + Spring MVC 4当我开始 Apache Tomcat Server 8我收到此错误: Error creating bean with name 'wel

可可西里

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 我无法交换表格第一行或最后一行的图像