Javascript没有在函数内进入FOR循环答案

【问题标题】：Javascript not entering a FOR loop inside a functionJavascript没有在函数内进入FOR循环
【发布时间】：2014-11-02 03:53:30
【问题描述】：

几天前我来到这里，寻求有关在 JS/CSS 中创建正方形网格的帮助。

一位非常乐于助人的人来到这里指导我使用两个嵌套的 fors 和 createElement('div'); 来完成工作。但是，他的示例是直接执行此操作的代码：http://jsfiddle.net/3x1kmcme/

我需要使用 .click() JQuery 函数在用户单击按钮时实际发生操作。这不起作用，并且没有显示错误。我确实尝试过代码本身，甚至更改了它，预先将其声明为变量，并逐行检查错误所在，似乎它没有进入FOR循环，我可能是错的，当然.

也许我遗漏了什么明显的东西？

var rows = 8,
    cells = 8,
    count = 0;

var i, j,
    top = 0,
    left = 0;

var boxWidth = 50,
    boxHeight = 50;    

var $canvas = $('#canvas');
var $fragment = $(document.createDocumentFragment());

$(document).ready(function () {
    "use strict";
    $("#btnstart").click(function () {
        function addBox(opts) {
            var div = document.createElement('div');
            div.id = opts.id;
            div.className = 'alive';
            div.style.top = opts.top + "px";
            div.style.left = opts.left + "px";
            $fragment.append(div);

        }
        for (j = 0; j < rows; j += 1) {
            top = j * boxHeight;
            for (i = 0; i < cells; i += 1) {
                count += 1;
                addBox({
                    count: count,
                    id: 'item' + i,
                    top: top,
                    left: i * boxWidth
                });
            }
        }
        $canvas.html($fragment);
    });
});

【问题讨论】：

你在哪里设置rows和cells？
这可能是您阅读、学习和了解 JavaScript 源代码级调试的绝佳机会。在 for 循环之前在代码中设置断点，然后单步执行。这将告诉你你的代码路径是如何被执行的。
我没有粘贴整个代码，然后会做，编辑！
你应该清空函数开头或结尾的片段。否则，每次点击都会复制上一次点击的所有框。
creativebloq.com/javascript/…

标签： javascript jquery html css for-loop

【解决方案1】：

它似乎在以下fiddle工作得很好

不确定到底是什么问题。我在 HTML 中添加了以下更改

<div id="canvas"></div>

<input type='button' id='btnstart' value='Start' />

【讨论】：

我不知道，我从 3 个文件中创建了一个 fiddle，它确实可以在 jsfiddle 中使用，但是当我实际使用浏览器时它不会（Chrome 和 IE）
@JoseRosales 你能发布你的整个 HTML 吗？查看您发布的小提琴，html 已损坏。
这几乎是整个 HTML，但 jsfiddle 一直坚持我没有理由放置一些标签。 The Fiddle已经更新了整个html

【解决方案2】：

我发现了问题以及它在 JSFiddle 上起作用的原因。即使我将 JavaScript 文件包装在 Document.Ready 函数中，我仍然必须将脚本放在页面底部，就在标记下方。

【讨论】：