意外斷線不會在調試器

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/