Javascript，代码如何在语法上有效而不运行？

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

我的“语法有效”代码的JSFIDLE是，我从中复制的原始代码是。在研究这个问题时，我知道存在某种负载问题，因为JSFIDLE中的代码通常会出现这种情况。因此，document.addEventListener位于第一行

如果有人能解释为什么没有加载这段代码，我会非常激动。下面是一个JS示例，但请查看JSFIDLE以观察问题。谢谢大家的阅读

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


}

document.addEventListener（“DOMContentLoaded”，starter（））；
函数启动器（）{
var grid_行，
格鲁科尔斯，
网格单元；
变量配置={
gridContainer：“网格”，
matrixContainer:“矩阵”，
matrixHeader：“matrixHeader”
};
var start=函数（）{
网格_行=12；
网格=12；
createGrid（）；
};
函数createGrid（）{
网格元素=$（“#”+config.gridContainer）；
var cell；//包含基于单元格选择的1或0
var newGrid=$（''）；
对于（var i=1；i您的代码在语法上是有效的，但由于以下原因，它在逻辑上是无效的

更换这条线

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

document.addEventListener("DOMContentLoaded", starter);

用这条线

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

document.addEventListener("DOMContentLoaded", starter);

说明：这是因为
starter（）
将运行
starter
函数，但
starter
将给它一个函数的引用。这正是
addEventListener
需要的。
不要在addEventListener中添加“（）”，你怎么知道它没有加载？它可能工作不正常（这完全可能是语法正确的代码）。“将其修改为纯JS”（除了jQuery也是JavaScript这一事实之外），在您的示例中仍然存在jQuery。问题@Merigold已经提到：
starter
而不是
starter（）
。您从未调用
start（）
，它应该“构建”网格（使用固定值而不是输入字段中的值）-根据@Andreas Suggestions，它在运行时很重要…（如果dom已经加载，Fiddles倾向于运行js）@先生，我的答案有帮助吗？有，谢谢你的跟进。通过3W学校的阅读，他们总是使用函数名，但你告诉了我原因。另一方面，我的网格从未加载是因为从未调用start。从那里开始，问题层叠，因为start调用下一个函数createGrid（）。再次感谢您花时间解释事件处理程序。在没有专业见解的情况下，您可以从Codecademy中学到的东西只有这么多。@先生，很高兴我能提供帮助：）请将问题标记为已回答。