爲什麼<br>的「innerHTML」屬性不會創建新行？

Question

我試圖建立一個金字塔的「*」，我只能看到它的最後一行，而警報我可以看到每一行。有人知道我的代碼有什麼問題嗎？

function build(){ 
     var x = document.hi.floor.value; 
     //alert(x); 
     var i; 
     var bil= ""; 
     for(i=0; i<x; i+=1){ 
      bil = bil + "*"; 
      //alert(bil); 
      document.querySelector(".py").innerHTML= bil +"<br/>"; 
     }   
    } 

這是fiddle。

Answer 1

你應該串聯搜索結果中環，然後將結果輸出事後，像這樣：

function build(){ 
    var x = document.hi.floor.value; 
    //alert(x); 
    var i; 
    var bil= ""; 
    var html = ""; 
    for(i=0; i<x; i+=1){ 
     bil = bil + "*"; 
     //alert(bil); 
     html += bil +"<br/>"; 
    } 
    document.querySelector(".py").innerHTML= html; 
} 

你只是覆蓋的innerHTML每個先前值與bil最新值。所以最後你只有***<br/>（對於x = 3），並且換行並沒有真正顯示，因爲它後面沒有任何東西。

這是fiddle。