Question

我正在尝试用JavaScript编写一个Sudoku生成器，我想我做到了。我的问题是在我用于游戏的输入标签内可视化生成的解决方案。我把这个函数放在我的html页面主体的属性onload上：

function begin() {
    var container=document.getElementById("container");
    var div;
    for(var i=0; i<9; i++) {
        div=document.createElement("div");
        div.id=i;
        div.setAttribute("class", "square");
        for(var j=0;j<9;j++) {
            var square=document.createElement("input");
            square.setAttribute("type", "text");
            square.setAttribute("maxlength", "1");
            if(i%2==0) {
                square.setAttribute("class", "square1");
            }
            else {
                square.setAttribute("class", "square2");
            }
            div.appendChild(square);
        }
        container.appendChild(div);
    }
}

它工作得非常好，因为它显示了9个正方形（div），每个正方形内有9个小方块（输入）。

现在最后一个函数是，显示结果是：

function showSudoku(sudoku, i) {
    var container = document.getElementById("container");
    var cells = container.getElementsByTagName("input");
    for(var j=0; j<81; j++)
        cells[j].value = sudoku[j];
}

但我收到了错误

Uncaught TypeError: Cannot read property 'getElementsByTagName' of null

由于某种原因，变量容器未使用标识为container的元素进行初始化。任何人都可以帮助我吗？

[编辑] 这是HTML代码：

<!DOCTYPE html>
<html lang="it">
    <head>
        <meta charset="utf-8">
        <title>Sudoku</title>
        <style type="text/css">
            body {
                text-align: center;
            }
            #game {
                width: 21.2em;
                height: 21.15em;
                margin: auto;
                border: 2px solid #777777;
            }
            #container {
                width: 21.2em;
                height: 21.2;
                margin: auto;
            }
            .square {
                width: 6.94em;
                height: 6.94em;
                display: inline-block;
                border: 1px solid #A9A9A9

            }
            .square1 {
                height: 3em;
                width: 3em;
                background-color: white;
                border: 1px dashed #CBCBCB;
                color: black;
                display: inline-block;
            }
            .square2 {
                height: 3em;
                width: 3em;
                background-color: #DDDDDD;
                border: 1px dashed #CBCBCB;
                color: black;
                display: inline-block;
            }
            input {
                text-align: center;
            }
        </style>
        <script type="text/javascript" src="sudoku.js">
        </script>
    </head>
    <body onload="begin()">
        <div id="levels">
            <label><input type="radio">Easy</label>
            <label><input type="radio">Medium</label>
            <label><input type="radio">Hard</label>
        </div>
        <div id="buttons">
            <button id="newgame" onclick="newGame()">NEW GAME</button>
            <button id="solve">SOLVE</button>
        </div>
        <br>
        <div id="game">
            <div id="container">
            </div>
        </div>
        <br>
        <div id="time">
            <input id="currentTime" type="text" readonly="readonly">
        </div>
    </body>
</html>

按钮和输入无线电仍未使用。

Answer 1

嘿，你正在搞乱标记名，因为你不会指定你想要在javascript中添加哪种输入类型。所以你必须按照以下方式进行：

    var nodeLists = document.getElementsByTagName("input");
    for(node in nodeLists){   
     if(nodeLists[node].getAttribute('type') == "text"){
        //write code here as you want
       }
       else{
       } 
   }

Javascript Uncaught TypeError：无法读取null的属性'getElementsByTagName'

1 个答案: