為什么“ innerHTML”屬性具有 <br> 不創建新行？

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/>";  
        }           
    }

這是一個小提琴 。

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;
}

您只是用bil的最新值覆蓋了innerHTML每個先前值。 所以最后只有***<br/> （對於x = 3），並且換行符並沒有真正顯示出來，因為后面沒有任何內容。

這是一個小提琴 。