如何使用“document.getElementById”在 Javascript 中打印多维数组元素

Question

问题 我正在对我当前的 Javascript 项目进行收尾工作。它利用回溯算法来完成数独谜题，这是一个预设的二维数组。我完成了解决问题的算法的编写。但是，我无法弄清楚为什么它没有在本地主机服务器上打印问题或结果。因此，我无法测试我的代码。

我的尝试 我对 printBoard 函数内的每个数组元素使用了 document.getElemenetById，然后在 html 文件中使用该函数。

数独.js

var board =
    [[0, 7, 0, 2, 3, 8, 0, 0, 0],
    [0, 0, 0, 7, 4, 0, 8, 0, 9],
    [0, 6, 8, 1, 0, 9, 0, 0, 2],
    [0, 3, 5, 4, 0, 0, 0, 0, 8],
    [6, 0, 7, 8, 0, 2, 5, 0, 1],
    [8, 0, 0, 0, 0, 5, 7, 6, 0],
    [2, 0, 0, 6, 0, 3, 1, 9, 0],
    [7, 0, 9, 0, 2, 1, 0, 0, 0],
    [0, 0, 0, 9, 7, 4, 0, 8, 0]];

var printBoard = function() {
    var r11 = document.getElementById('r11');
    r11.textContent = sol[0][0];
    var r12 = document.getElementById('r12');
    r12.textContent = sol[0][1];
    var r13 = document.getElementById('r13');
    r13.textContent = sol[0][2];
    var r14 = document.getElementById('r14');
    r14.textContent = sol[0][3];
    var r15 = document.getElementById('r15');
    r15.textContent = sol[0][4];
    var r16 = document.getElementById('r16');
    r16.textContent = sol[0][5];
    var r17 = document.getElementById('r17');
    r17.textContent = sol[0][6];
    var r18 = document.getElementById('r18');
    r18.textContent = sol[0][7];
    var r19 = document.getElementById('r19');
    r19.textContent = sol[0][8];

    var r21 = document.getElementById('r21');
    r21.textContent = sol[1][0];
    var r22 = document.getElementById('r22');
    r22.textContent = sol[1][1];
    var r23 = document.getElementById('r23');
    r23.textContent = sol[1][2];
    var r24 = document.getElementById('r24');
    r24.textContent = sol[1][3];
    var r25 = document.getElementById('r25');
    r25.textContent = sol[1][4];
    var r26 = document.getElementById('r26');
    r26.textContent = sol[1][5];
    var r27 = document.getElementById('r27');
    r27.textContent = sol[1][6];
    var r28 = document.getElementById('r28');
    r28.textContent = sol[1][7];
    var r29 = document.getElementById('r29');
    r29.textContent = sol[1][8];

    var r31 = document.getElementById('r31');
    r31.textContent = sol[2][0];
    var r32 = document.getElementById('r32');
    r32.textContent = sol[2][1];
    var r33 = document.getElementById('r33');
    r33.textContent = sol[2][2];
    var r34 = document.getElementById('r34');
    r34.textContent = sol[2][3];
    var r35 = document.getElementById('r35');
    r35.textContent = sol[2][4];
    var r36 = document.getElementById('r36');
    r36.textContent = sol[2][5];
    var r37 = document.getElementById('r37');
    r37.textContent = sol[2][6];
    var r38 = document.getElementById('r38');
    r38.textContent = sol[2][7];
    var r39 = document.getElementById('r39');
    r39.textContent = sol[2][8];

    var r41 = document.getElementById('r41');
    r41.textContent = sol[3][0];
    var r42 = document.getElementById('r42');
    r42.textContent = sol[3][1];
    var r43 = document.getElementById('r43');
    r43.textContent = sol[3][2];
    var r44 = document.getElementById('r44');
    r44.textContent = sol[3][3];
    var r45 = document.getElementById('r45');
    r45.textContent = sol[3][4];
    var r46 = document.getElementById('r46');
    r46.textContent = sol[3][5];
    var r47 = document.getElementById('r47');
    r47.textContent = sol[3][6];
    var r48 = document.getElementById('r48');
    r48.textContent = sol[3][7];
    var r49 = document.getElementById('r49');
    r49.textContent = sol[3][8];

    var r51 = document.getElementById('r51');
    r51.textContent = sol[4][0];
    var r52 = document.getElementById('r52');
    r52.textContent = sol[4][1];
    var r53 = document.getElementById('r53');
    r53.textContent = sol[4][2];
    var r54 = document.getElementById('r54');
    r54.textContent = sol[4][3];
    var r55 = document.getElementById('r55');
    r55.textContent = sol[4][4];
    var r56 = document.getElementById('r56');
    r56.textContent = sol[4][5];
    var r57 = document.getElementById('r57');
    r57.textContent = sol[4][6];
    var r58 = document.getElementById('r58');
    r58.textContent = sol[4][7];
    var r59 = document.getElementById('r59');
    r59.textContent = sol[4][8];

    var r61 = document.getElementById('r61');
    r61.textContent = sol[5][0];
    var r62 = document.getElementById('r62');
    r62.textContent = sol[5][1];
    var r63 = document.getElementById('r63');
    r63.textContent = sol[5][2];
    var r64 = document.getElementById('r64');
    r64.textContent = sol[5][3];
    var r65 = document.getElementById('r65');
    r65.textContent = sol[5][4];
    var r66 = document.getElementById('r66');
    r66.textContent = sol[5][5];
    var r67 = document.getElementById('r67');
    r67.textContent = sol[5][6];
    var r68 = document.getElementById('r68');
    r68.textContent = sol[5][7];
    var r69 = document.getElementById('r69');
    r69.textContent = sol[5][8];

    var r71 = document.getElementById('r71');
    r71.textContent = sol[6][0];
    var r72 = document.getElementById('r72');
    r72.textContent = sol[6][1];
    var r73 = document.getElementById('r73');
    r73.textContent = sol[6][2];
    var r74 = document.getElementById('r74');
    r74.textContent = sol[6][3];
    var r75 = document.getElementById('r75');
    r75.textContent = sol[6][4];
    var r76 = document.getElementById('r76');
    r76.textContent = sol[6][5];
    var r77 = document.getElementById('r77');
    r77.textContent = sol[6][6];
    var r78 = document.getElementById('r78');
    r78.textContent = sol[6][7];
    var r79 = document.getElementById('r79');
    r9.textContent = sol[6][8];

    var r81 = document.getElementById('r81');
    r81.textContent = sol[7][0];
    var r82 = document.getElementById('r82');
    r82.textContent = sol[7][1];
    var r83 = document.getElementById('r83');
    r83.textContent = sol[7][2];
    var r84 = document.getElementById('r84');
    r84.textContent = sol[7][3];
    var r85 = document.getElementById('r85');
    r85.textContent = sol[7][4];
    var r86 = document.getElementById('r86');
    r86.textContent = sol[7][5];
    var r87 = document.getElementById('r87');
    r87.textContent = sol[7][6];
    var r88 = document.getElementById('r88');
    r88.textContent = sol[7][7];
    var r89 = document.getElementById('r89');
    r89.textContent = sol[7][8];

    var r91 = document.getElementById('r91');
    r91.textContent = sol[8][0];
    var r92 = document.getElementById('r92');
    r92.textContent = sol[8][1];
    var r93 = document.getElementById('r93');
    r93.textContent = sol[8][2];
    var r94 = document.getElementById('r94');
    r94.textContent = sol[8][3];
    var r95 = document.getElementById('r95');
    r95.textContent = sol[8][4];
    var r96 = document.getElementById('r96');
    r96.textContent = sol[8][5];
    var r97 = document.getElementById('r97');
    r97.textContent = sol[8][6];
    var r98 = document.getElementById('r98');
    r98.textContent = sol[8][7];
    var r99 = document.getElementById('r99');
    r99.textContent = sol[8][8];
};

function nextEmptySpot (board) {
    for (var i = 0; i < 9; i++) {
        for (var j = 0; j < 9; j++) {
            if (board[i][j] == 0) {
                return [i, j]; } } }
    return [-1, -1];
};

function checkRow(board, row, value){
    for(var i = 0; i < board.row.length; i++) {
        if (board[row][i] == value) {
            return false; } }
    return true;
}

function checkColumn(board, column, value) {
    for (var i = 0; i < board.length; i++) {
        if(board[i][column] === value) {
            return false; } }
    return true;
}

function checkSquare(board, row, column, value){
    boxRow = Math.floor(row / 3) * 3;
    boxCol = Math.floor(column / 3) * 3;
    
    for (var r = 0; r < 3; r++){
        for (var c = 0; c < 3; c++){
            if (board[boxRow + r][boxCol + c] === value)
                return false; } }
    return true;
};

function checkValue(board, row, column, value) {
    if(checkRow(board, row, value) &&
      checkColumn(board, column, value) &&
      checkSquare(board, row, column, value)) {
        return true; }
    return false; 
};

function solve(board) {  
    let emptySpot = nextEmptySpot(board);
    let row = emptySpot[0];
    let col = emptySpot[1];

    if (row === -1){
        return board; }

    for(let num = 1; num<=9; num++){
        if (checkValue(board, row, col, num)){
            board[row][col] = num;
            solve(board); } }

    if (nextEmptySpot(board)[0] !== -1)
        board[row][col] = 0;

    return board;
};

index.html

<! DOCTYPE html >
<html >
  <head >
    <link rel ="stylesheet" href ="sudoku.css"/>
  </head >
  <body>
  <table >
    <tr >
    <td id='r11'> </td >
    <td id='r12'> </td >
    <td id='r13'> </td >
    <td id='r14'> </td >
    <td id='r15'> </td >
    <td id='r16'> </td >
    <td id='r17'> </td >
    <td id='r18'> </td >
    <td id='r19'> </td >
    </tr >
    <tr >
    <td id='r21' > </td >
    <td id='r22' > </td >
    <td id='r23' > </td >
    <td id='r24' > </td >
    <td id='r25' > </td >
    <td id='r26' > </td >
    <td id='r27' > </td >
    <td id='r28' > </td >
    <td id='r29' > </td >
    </tr >
    <tr >
    <td id='r31'> </td >
    <td id='r32'> </td >
    <td id='r33'> </td >
    <td id='r34'> </td >
    <td id='r35'> </td >
    <td id='r36'> </td >
    <td id='r37'> </td >
    <td id='r38'> </td >
    <td id='r39'> </td >
    </tr >
    <tr >
    <td id='r41'> </td >
    <td id='r42'> </td >
    <td id='r43'> </td >
    <td id='r44'> </td >
    <td id='r45'> </td >
    <td id='r46'> </td >
    <td id='r47'> </td >
    <td id='r48'> </td >
    <td id='r49'> </td >
    </tr >
    <tr >
    <td id='r51'> </td >
    <td id='r52'> </td >
    <td id='r53'> </td >
    <td id='r54'> </td >
    <td id='r55'> </td >
    <td id='r56'> </td >
    <td id='r57'> </td >
    <td id='r58'> </td >
    <td id='r59'> </td >
    </tr >
    <tr >
    <td id='r61'> </td >
    <td id='r62'> </td >
    <td id='r63'> </td >
    <td id='r64'> </td >
    <td id='r65'> </td >
    <td id='r66'> </td >
    <td id='r67'> </td >
    <td id='r68'> </td >
    <td id='r69'> </td >
    </tr >
    <tr >
    <td id='r71'> </td >
    <td id='r72'> </td >
    <td id='r73'> </td >
    <td id='r74'> </td >
    <td id='r75'> </td >
    <td id='r76'> </td >
    <td id='r77'> </td >
    <td id='r78'> </td >
    <td id='r79'> </td >
    </tr >
    <tr >
    <td id='r81'> </td >
    <td id='r82'> </td >
    <td id='r83'> </td >
    <td id='r84'> </td >
    <td id='r85'> </td >
    <td id='r86'> </td >
    <td id='r87'> </td >
    <td id='r88'> </td >
    <td id='r89'> </td >
    </tr >
    <tr >
    <td id='r91' > </td >
    <td id='r92' > </td >
    <td id='r93' > </td >
    <td id='r94' > </td >
    <td id='r95' > </td >
    <td id='r96' > </td >
    <td id='r97' > </td >
    <td id='r98' > </td >
    <td id='r99' > </td >
    </tr >
  </table >
    <button onclick="solve()">Solve</button>
  </body >
  <script src ="sudoku.js" > </script >
</html >