Javascript Uncaught TypeError: Cannot read property 'getElementsByTagName' of null

I'm trying to code a Sudoku generator in JavaScript and I think I did it. My problem is for visualizing the generated solution inside the input tags I use for the game. I put this function on the property onload of the body of my html page:

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);
    }
}

And it works perfectly fine, since it show 9 squares (the divs), each with 9 small squares inside(the inputs).

Now the last function is, to show the result is:

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];
}

but I get the error

Uncaught TypeError: Cannot read property 'getElementsByTagName' of null

For some reason the variable container is not initialized with the element identified with the id container. Can anyone help me?

[EDIT] Here is the HTML code:

<!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>

The buttons and the inputs radio are still unused.