javascript - 为什么点击new game程序没反应？控制台正常。-PHP中文网问答

在线代码：http://runjs.cn/code/c4pyncri

var board = [];

var container = document.getElementsByClassName('container');

window.onload = function(){
    newGame();
}

var newGame = function(){
    //初始化棋盘格
    init();
    //随机生成2个格子带2或4
    createNewCell();
    createNewCell();
}

var init = function(){
    //将作背景的格子归位，新生成的格子按这个坐标生成
    for (var i = 0; i < 4; i++) {
        for (var j = 0; j < 4; j++) {
            var gridCell = document.getElementById('grid_cell_' + i + '_' + j);
            gridCell.style.left = 20 + i * 120 + 'px';
            gridCell.style.top = 20 + j * 120 + 'px';
        }
    }
    //初始化二维数组，追踪新生成的格子
    for (var i = 0; i < 4; i++) {
        board[i] = [];
        for (var j = 0; j < 4; j++) {
            board[i][j] = 0;            
        }
    }
    //移除生成了的新格子
    var remove = document.getElementsByClassName('number-cell');
    while(remove.length != 0) {
        container.removeChild(remove[remove.length-1]);
    }
}

var createNewCell = function(){
    //随机生成格子的坐标
    var cellX = Math.floor(Math.random() * 4);
    var cellY = Math.floor(Math.random() * 4);
    //如果该格子有数字重新找个格子
    while(true){
        if(board[cellX][cellY] === 0){
            break;
            
        }else{
            cellX = Math.floor(Math.random() * 4);
            cellY = Math.floor(Math.random() * 4);
        }
    }
    //给该随机的格子附上样式和数字
    var numberCell = document.createElement('p');
    numberCell.id = 'number_cell_' + cellX + '_' + cellY;
    container[0].appendChild(numberCell);
    // var newNumberCell = document.getElementById('number_cell_' + cellX + '_' + cellY);
    numberCell.className = 'number-cell';
    numberCell.style.left = 20 + cellX * 120 +'px';            
    numberCell.style.top = 20 + cellY * 120 +'px';
    var randomNumber = Math.random() < 0.5 ? 2 : 4;
    board[cellX][cellY] = randomNumber;

    if (randomNumber === 2) {
        numberCell.style.backgroundColor = '#eee4da';
    }else{
        numberCell.style.backgroundColor = '#ede0c8';
    }
    numberCell.innerHTML = randomNumber;
    numberCell.style.color = '#776e56';
    numberCell.style.width = 100 + 'px';
    numberCell.style.height = 100 + 'px';
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>2048</title>
</head>
<body>
    <header>
        <h1>2048</h1>
        <a href="javascript:newGame();" id="newgamebutton" class="new-game-button">New Game</a>
        <p>score : <span id="score">0</span></p>
    </header>

    <p id="grid_container" class="container">
        <p class="grid-cell" id="grid_cell_0_0"></p>
        <p class="grid-cell" id="grid_cell_0_1"></p>
        <p class="grid-cell" id="grid_cell_0_2"></p>
        <p class="grid-cell" id="grid_cell_0_3"></p>

        <p class="grid-cell" id="grid_cell_1_0"></p>
        <p class="grid-cell" id="grid_cell_1_1"></p>
        <p class="grid-cell" id="grid_cell_1_2"></p>
        <p class="grid-cell" id="grid_cell_1_3"></p>

        <p class="grid-cell" id="grid_cell_2_0"></p>
        <p class="grid-cell" id="grid_cell_2_1"></p>
        <p class="grid-cell" id="grid_cell_2_2"></p>
        <p class="grid-cell" id="grid_cell_2_3"></p>

        <p class="grid-cell" id="grid_cell_3_0"></p>
        <p class="grid-cell" id="grid_cell_3_1"></p>
        <p class="grid-cell" id="grid_cell_3_2"></p>
        <p class="grid-cell" id="grid_cell_3_3"></p>
    </p>

    <script src = "main.js"></script>
</body>
</html>

header{
    text-align: center;
}
header h1{
    font-family: Arial;
    font-size: 60px;
    font-weight: bold;
}
.new-game-button{
    display: block;
    text-decoration: none;

    width: 100px;
    padding: 10px;
    margin: 0 auto;

    background-color: #8f7a66;

    font-family: Arial ;
    color: #fff;

    border-radius: 10px;
}
.new-game-button:hover{
    background-color: #9f8b77;
}
p{
    font-family: Arial;
    font-size: 25px;
}

.container{
    width: 460px;
    height: 460px;
    padding: 20px;
    margin: 50px auto;

    background-color: #bbada0;

    border-radius: 10px;
    position: relative;
}
.grid-cell{
    width: 100px;
    height: 100px;
    border-radius: 6px;
    background-color: #ccc0b3;

    position: absolute;
}

.number-cell{
    border-radius: 6px;

    font-family: Arial;
    font-weight:bold;
    font-size:60px;
    line-height:100px;
    text-align:center;

    position:absolute;

}

我觉得逻辑是没错的。。。但是程序运行不了，针对这种自身情形要怎么提高自己写代码的能力