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需要的。

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

1 个答案: