JavaScript未在函数内部输入FOR循环

-3

前几天我来到这里，询问如何在JS/CSS中创建方格网格。JavaScript未在函数内部输入FOR循环

一个非常有帮助的人来到这里，并指导我使用两个嵌套的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); 
    }); 
});

来源

2014-11-02 Jose Rosales

你在哪里设置'rows'和'cells'？ – Barmar 2014-11-02 03:54:54

这可能是您阅读，学习和学习JavaScript源代码级调试的绝佳机会。在for循环之前在您的代码中设置一个断点，然后逐步完成。这会告诉你你的代码路径是如何被执行的。 – Kolban 2014-11-02 03:56:04

我没有粘贴整个代码，会做，然后编辑！ – 2014-11-02 03:56:07

似乎在以下fiddle

不能确定究竟是什么问题，工作得很好。我添加了以下更改HTML

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

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

来源

2014-11-02 04:03:46 Gjohn

我不知道，我去了[小提琴]（http://jsfiddle.net/v1t6qc1a/1）出了3文件，它可以在jsfiddle中工作，但当我真的去浏览器它不（Chrome和IE） – 2014-11-02 04:17:23

@JoseRosales你可以发布你的整个HTML？看着你发布的小提琴，html被打破了。 – Gjohn 2014-11-02 04:32:59

这几乎是整个HTML，但jsfiddle一直坚持我没有理由把一些标签。 [The Fiddle]（http://jsfiddle.net/v1t6qc1a/2/）已被更新为整个html – 2014-11-02 14:03:58

我想通了这个问题，为什么它的工作对的jsfiddle的原因。即使我将JavaScript文件封装在Document.Ready函数中，我仍然不得不将脚本放在页面底部，就在标签的下方。

来源

2014-11-02 14:10:32

JavaScript未在函数内部输入FOR循环

回答

相关问题