Javascript，代码如何在语法上有效并且无法运行？

Question

我从 JSfiddle 复制了一些代码，将其修改为纯 JS 并通过 Esprima 运行它。结果是语法上有效的代码，但我通过 Chrome 运行它并得到一个空白屏幕。经过 12 小时的不到 50 行代码后，我需要一些帮助才能将其加载到浏览器中。

我的“语法有效”代码的 JSfiddle 是 here我复制的原始代码是 here 。研究这个问题后，我知道存在某种加载问题，因为这是 JSfiddle 代码中通常会发生的情况。因此，document.addEventListener 位于第一行。

如果有人能解释为什么这段代码没有加载，我会非常兴奋。这是 JS 的示例，但请查看 JSfiddle here来观察问题。感谢大家的阅读。

document.addEventListener("DOMContentLoaded", starter());
function starter() {
    var grid_rows,
    grid_cols,
    grid_element;

var config = {
    gridContainer: "grid",
    matrixContainer: "matrix",
    matrixHeader: "matrixHeader"
};

var start = function () {
    grid_rows = 12;
    grid_cols = 12;
    createGrid();
};

function createGrid() {
    grid_element = $("#" + config.gridContainer);
    var cell; // Contains the 1 or 0 based upon the cell selection
    var newGrid = $('<div id="grid" class="gridContainer" ></div>');


    for (var i = 1; i <= grid_rows; i++) {
        for (var j = 1; j <= grid_cols; j++) {
            $("<div class='cell' data-hover-text='"+i+","+j+"'>0</div>")
                .appendTo(newGrid)
                .on("click", cellClick);
        }
    }

    newGrid.height(38 * grid_rows);
    newGrid.width(38 * grid_cols);

    grid_element.replaceWith(newGrid);
}

function cellClick() {
    $(this).text($(this).text() == "0" ? "1" : "0");
}


}

Answer 1

您的代码在技术上语法上有效，但由于以下原因在逻辑上无效。

替换此行

document.addEventListener("DOMContentLoaded", starter());

用这一行

document.addEventListener("DOMContentLoaded", starter);

解释:这是因为 starter() 将运行 starter 函数，但 starter 会给它一个函数的引用。这正是 addEventListener 所需要的。