Question

我有一个项目可以为学校做记忆游戏。网格为6x6，排列在一个表格中。我要做的是当用户点击“打印”按钮时，表格填满了2d数组中的数字。我创建了包含数字的数组，但我无法将它们输出到HTML文件中的表。

这是我的代码：

<!DOCTYPE html>

<head>
    <link href = "matchinggame.css" rel = "stylesheet"/>


</head>

<body>
    <table>
        <tr>
            <td id="cell00" ></td>
            <td id="cell01" ></td>
            <td id="cell02" ></td>
            <td id="cell03" ></td>
            <td id="cell04" ></td>
            <td id="cell05" ></td>
        </tr>
        <tr>
            <td id="cell10" ></td>
            <td id="cell11" ></td>
            <td id="cell12" ></td>
            <td id="cell13" ></td>
            <td id="cell14" ></td>
            <td id="cell15" ></td>
        </tr>
        <tr>
            <td id="cell20" ></td>
            <td id="cell21" ></td>
            <td id="cell22" ></td>
            <td id="cell23" ></td>
            <td id="cell24" ></td>
            <td id="cell25" ></td>
        </tr>
        <tr>
            <td id="cell30" ></td>
            <td id="cell31" ></td>
            <td id="cell32" ></td>
            <td id="cell33" ></td>
            <td id="cell34" ></td>
            <td id="cell35" ></td>
        </tr>
        <tr>
            <td id="cell40" ></td>
            <td id="cell41" ></td>
            <td id="cell42" ></td>
            <td id="cell43" ></td>
            <td id="cell44" ></td>
            <td id="cell45" ></td>
        </tr>
        <tr>
            <td id="cell50" ></td>
            <td id="cell51" ></td>
            <td id="cell52" ></td>
            <td id="cell53" ></td>
            <td id="cell54" ></td>
            <td id="cell55" ></td>
        </tr>
    </table>

    <div>
        <input type="button" value="print" id = "button1" onclick="drawBoard();">
    </div>


</body>

root {
    display: block;
}

body {
    text-align:center;
}

p {
    font-family:monospace;
}

table {
    margin:auto;
}

td {
    width:50px;
    height:50px;
    border: 1px solid black;
    font-size:40px;
    text-align:center;
    font-family:arial, helvetica, sans-serif;
}

JS：

var board = [["1", "1", "2", "2", "3", "3"],
        ["4", "4", "5", "5", "6", "6"],
        ["7", "7", "8", "8", "9", "9"],
        ["10", "10", "11", "11", "12", "12"],
        ["13", "13", "14", "14", "15", "15"],
        ["16", "16", "17", "17", "18", "18"]];



    function drawBoard() {
        for (int row = 0; row < board.length; i++) {
            for (int col = 0; col < board[row].length; j++) {
                var cell = document.getElementById("cell" + row + col);
                cell.innerHTML = board[row][col];
        }

    }
}

Answer 1

所以我在浏览器中运行了你的代码，输出了我修复过的一些错误。这是工作代码：

var board = [["1", "1", "2", "2", "3", "3"],
        ["4", "4", "5", "5", "6", "6"],
        ["7", "7", "8", "8", "9", "9"],
        ["10", "10", "11", "11", "12", "12"],
        ["13", "13", "14", "14", "15", "15"],
        ["16", "16", "17", "17", "18", "18"]];



    function drawBoard() {
        for (var row = 0; row < board.length; row++) {
            for (var col = 0; col < board[row].length; col++) {
                var cell = document.getElementById("cell" + row + col);
                cell.innerHTML = board[row][col];
        }

    }
}

我修正的事情是：

您使用int代替var来声明for循环中的row / col。 JavaScript没有任何类型。
你正在增加i / j而不是row / col。

Answer 2

这更有效，更优雅：

board.forEach((row, i) => 
   row.forEach((item, j) => {
      document.getElementById("cell" + i + j).innerHTML = item
   })
)

＆＃13;

var board = [["1", "1", "2", "2", "3", "3"],
        ["4", "4", "5", "5", "6", "6"],
        ["7", "7", "8", "8", "9", "9"],
        ["10", "10", "11", "11", "12", "12"],
        ["13", "13", "14", "14", "15", "15"],
        ["16", "16", "17", "17", "18", "18"]];


board.forEach((row, i) => 
   row.forEach((item, j) => {
      document.getElementById("cell" + i + j).innerHTML = item
   })
)

＆＃13;

root {
    display: block;
}

body {
    text-align:center;
}

p {
    font-family:monospace;
}

table {
    margin:auto;
}

td {
    width:50px;
    height:50px;
    border: 1px solid black;
    font-size:40px;
    text-align:center;
    font-family:arial, helvetica, sans-serif;
}

＆＃13;

<head>

</head>

<body>
    <table>
        <tr>
            <td id="cell00" ></td>
            <td id="cell01" ></td>
            <td id="cell02" ></td>
            <td id="cell03" ></td>
            <td id="cell04" ></td>
            <td id="cell05" ></td>
        </tr>
        <tr>
            <td id="cell10" ></td>
            <td id="cell11" ></td>
            <td id="cell12" ></td>
            <td id="cell13" ></td>
            <td id="cell14" ></td>
            <td id="cell15" ></td>
        </tr>
        <tr>
            <td id="cell20" ></td>
            <td id="cell21" ></td>
            <td id="cell22" ></td>
            <td id="cell23" ></td>
            <td id="cell24" ></td>
            <td id="cell25" ></td>
        </tr>
        <tr>
            <td id="cell30" ></td>
            <td id="cell31" ></td>
            <td id="cell32" ></td>
            <td id="cell33" ></td>
            <td id="cell34" ></td>
            <td id="cell35" ></td>
        </tr>
        <tr>
            <td id="cell40" ></td>
            <td id="cell41" ></td>
            <td id="cell42" ></td>
            <td id="cell43" ></td>
            <td id="cell44" ></td>
            <td id="cell45" ></td>
        </tr>
        <tr>
            <td id="cell50" ></td>
            <td id="cell51" ></td>
            <td id="cell52" ></td>
            <td id="cell53" ></td>
            <td id="cell54" ></td>
            <td id="cell55" ></td>
        </tr>
    </table>

    <div>
        <input type="button" value="print" id = "button1" onclick="drawBoard();">
    </div>


</body>

＆＃13;

将2d数组输出到html文件中

2 个答案: