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循環

回答

相關問題