javascript简单的while循环不添加到innerHtml

Question

好吧，这是我的愚蠢问题。我在这里学习……我已经研究这个有一段时间了，但我不明白。我有一个数组，其中包含一些通过对象提供的值。像这样：

function blogObj(name,date,user_entry){
    this.names = name;
    this.dates = date;
    this.blog_entry = user_entry;

    this.propsComb = this.names + this.dates + this.blog_entry;
}

var blogRun = [
        new blogObj("name ", "something ", "something "),
        new blogObj("name ", "something ", "something "),
        new blogObj("name ", "something ", "something "),
        new blogObj("name ", "something ", "something "),
        new blogObj("name ", "something ", "something "),


];

var i=0;
var mssgs = "";

现在，当我像这样用这个 doc.write 来测试它时：

function hmm(){
    while(i < blogRun.length){ 
    mssgs = blogRun[i].propsComb + '<br/>';
    document.write(mssgs);

    i++;
    }
}

我得到了我需要的所有值，这些值根据循环和数组的值命名为 x5 。所以本质上它是有效的。

现在，当我将 "document.write(mssgs)" 替换为

document.getElementById('showMore').innerHTML = mssgs;

它时，

function hmm(){
    while(i < blogRun.length){ 
    mssgs = blogRun[i].propsComb + '<br/>';
    //document.write(mssgs);
    document.getElementById('showMore').innerHTML = mssgs;
    i++;
    }
}

它只显示数组的最后一个值。它不会循环遍历数组的其余值。 我所做的就是用 getElementById 等替换 .write 。

Answer 1

在每次迭代中，您都会覆盖（重新分配）'showMore' 的 innerHtml 值，

请改用 += 附加（添加到）'showMore'当前现有内容

document.getElementById('showMore').innerHTML += mssgs;

旁注

我还希望您使用for 在这种情况下循环，因为您正在循环遍历静态数组，其中需要迭代的次数从一开始就已知

（<代码>blogRun.length )

for ( var i = 0, len = blogRun.length; i < len; i++ ) {
    // .... do your stuff here.
}

Answer 2

innerHTML 会替换元素的全部内容。

这应该效果更好

//before the while loop
var strHTML= '';
...
//inside while loop
strHTML += mssgs;
...
//after while loop
document.getElementById('showMore').innerHTML = strHTML;

Answer 3

.innerHtml 将在每个循环中替换元素 showMore 中的值。如果您希望 showMore 显示所有值，您需要将这些值附加/连接在一起，然后替换innerHtml。

或者您应该能够简单地将 mssgs 值附加到innerHtml：

document.getElementById('showMore').innerHTML += mssgs;