意外断线不会在调试器

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; 

我觉得第二个缺少长度之前 “孩子”。正如Shaed指出的，numbchildren2被错误地初始化是for循环未运行的最可能的原因，所以你应该一直在研究这个。

Answer 2

我不熟悉window [elementID]的语法来获取元素，但我确定它不起作用。改为使用document.getElementById。

http://jsfiddle.net/M9jtt/