Неожиданный разрыв в вложенном цикле не отображается в отладчике

Question

Цели коды построить ряд вложенных HTML с использованием информации в объектах:

Здесь находятся информационные объекты, которые я создал:

function branch(level,sciname,comname,parent,children){ 
    this.level = level; 
    this.sciname = sciname; 
    this.comname = comname; 
    this.parent = parent; 
    this.children = children;} 

var animalia = new branch(1,'Animalia','Animals',"",['chordata']); 
var chordata = new branch(2,'Chordata','Chordates',animalia,['petromyzontida','actinopterygii']); 
var actinopterygii = new branch(3,'Actinopterygii','Ray-finned Fishes',chordata,['siluriformes','scorpaeniformes','salmoniformes','percopsiformes','perciformes','osteoglossiformes','osmeriformes','lepisosteiformes','gasterosteiformes','gadiformes','esociformes','cyprinodontiformes','cypriniformes','clupeiformes','atheriniformes','anguilliformes','amiiformes','acipenseriformes']); 
var petromyzontida = new branch(3,'Petromyzontida','Lampreys',chordata,['petromyzontiformes']); 

а вот сценарий:

function CreateDiv(parent,child,z,width,height,top,left,bgcolor){ 
     var parent_ = document.getElementById(parent); 
     var newdiv = document.createElement("div"); 
     newdiv.setAttribute("id",child); 
     newdiv.style.zIndex = z; 
     newdiv.style.position = "absolute"; 
     newdiv.style.width = width + "%"; 
     newdiv.style.height = height + "%"; 
     newdiv.style.top = top + "%"; 
     newdiv.style.left = left + "%"; 
     newdiv.style.backgroundColor = bgcolor; 
     parent_.appendChild(newdiv);} 

function CreateTree(){ 
    var firstdiv = document.createElement("div"); 
    firstdiv.setAttribute("id","animalia"); 
    document.getElementById("container1").appendChild(firstdiv); 
    var parent1 = "animalia"; 
    var children1 = window[parent1].children; 
    var numbchildren1 = children1.length; 
    var rowcounter1 = 1; 
    var columncounter1 = 0; 
    for (i=0;i<numbchildren1;i++){ 
     var child1 = children1[i]; 
     var z1 = 2; 
     var columns1 = Math.ceil(Math.sqrt(numbchildren1)); 
     var width1 = (100/columns1) - 2; 
     var rows1 = Math.ceil(numbchildren1/columns1); 
     var height1 = (100/rows1) - 2; 
     var top1 = rowcounter1*height1 - height1 + 1; 
     var left1 = columncounter1*width1 + 1;       
     var bgcolor1 = "#B43333"; 
     CreateDiv(parent1,child1,z1,width1,height1,top1,left1,bgcolor1); 
     var numbchildren2 = window[child1].length; 
     if ((i/rowcounter1) == columns1){ 
      rowcounter1 = rowcounter1 + 1;} 
      else {rowcounter1 = rowcounter1;} 
     if (columncounter1 == columns1){ 
      columncounter1 = 1;} 
      else {columncounter1 = columncounter1 + 1;} 
     var rowcounter2 = 1; 
     var columncounter2 = 0; 
     console.log("before:" + columncounter2); 
     for (j=0;j<numbchildren2;j++){   
      console.log("after:" + columncounter2); 
      var child2 = children2[j]; 
      var z2 = 3; 
      var columns2 = Math.ceil(Math.sqrt(numbchildren2)); 
      var width2 = (100/columns2) - 1; 
      var rows2 = Math.ceil(numbchildren2/columns2); 
      var height2 = (100/rows2) - 1; 
      var top2 = rowcounter2*height2 - height2 + 1; 
      var left2 = columncounter2*width2 - width2 + 1;       
      var bgcolor2 = "#B48233"; 
      CreateDiv(parent2,child2,z2,width2,height2,top2,left2,bgcolor2);}}} 

Я запускать код через отладчик в десятки раз, и я не получаю никаких ошибок. Однако сценарий не выполняется полностью. Я подозревал бесконечный цикл, но я не понимаю, почему это произойдет, и, перейдя код очень подробно, я не могу найти никаких реальных проблем. Я могу сказать, где код, похоже, сломается. В приведенном выше коде есть два оператора console.log(). Первый оператор консоли правильно регистрируется, а второй - нет. Отладчик не показывает ошибок (Firebug), но код все равно не выполняется полностью. Пожалуйста помоги! И предложения или критика будут очень желанными, поскольку я все еще изучаю некоторые основы.

В качестве примечания: В конце концов, я добавлю к этому процессу создание нескольких слоев вложенных элементов, но хотел бы получить только первые пары слоев до того, как я начну вкладывать вещи дальше, поскольку однажды я делаю, что дополнительное вложение должно быть относительно легко.

Answer 1

Сравнить

var children1 = window[parent1].children; 

в

var numbchildren2 = window[child1].length; 

Я думаю, что второй один не хватает ".children" до длины. Как отметил Шад, некорректно инициализированная инициализация numbchildren2 была наиболее вероятной причиной отсутствия цикла for, поэтому вам следовало бы это исследовать.

Answer 2

Я не знаком с вашим синтаксисом окна [elementID], чтобы получить элемент, но я уверен, что он не работает. Вместо этого попробуйте использовать document.getElementById.

http://jsfiddle.net/M9jtt/