为什么“;innerHTML”;具有<br>不会't创建新行

Why does the "innerHTML" property with <br> doesn't create new lines?

本文关键字:不会 创建 新行 gt lt innerHTML 具有 为什么 br      更新时间:2023-09-26

我正在尝试构建一个"*"的金字塔,我只能看到它的最后一行,而有了警报,我可以看到每一行。有人知道我的代码出了什么问题吗?

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

这是一把小提琴。

您应该在循环中连接结果,然后输出结果,如下所示:

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),换行符并没有真正显示出来,因为后面什么都没有

这是一把小提琴。