在JavaScript中加载元素内的数据时出现问题

我的JavaScript有一个问题。在我的数组中，我有一些对象，我试图将它们全部加载到一些元素中，问题是当我尝试在“for”中返回我的元素并为每个元素设置对象时，它不起作用，我的意思是它只返回最后一个带有数据的对象，而其他框（元素）是空的

这是我的JavaScript代码

var dataStore = [{
    fname: "Keira",
    lname: "Mayo",
    yold: 30
},
{
    fname: "Isaac",
    lname: "Moses",
    yold: 20
},
{
    fname: "Edwina",
    lname: "Serena",
    yold: 34
},
{
    fname: "Tiana",
    lname: "Cheryl",
    yold: 26
},
];


var boxShow = `
                <div class="box" id="boxMsg">
                    <article class="media">
                        <div class="media-content">
                            <div class="content">
                                <p >
                                    <strong id="titMsg"> </strong> <small id="yold"> </small>
                                    <br>

                                </p>
                            </div>
                            <nav class="level is-mobile">
                                <div class="level-left">
                                    <a class="level-item button is-small has-background-primary has-text-light disabled" aria-label="done" id="doneBtn"  >Done</a>
                                    <a class="level-item button is-small has-background-danger has-text-light" aria-label="delete" id="delBtn">Delete</a>
                                </div>
                            </nav>
                        </div>
                    </article>
                </div>

                `;


    for (var i = 0; i <= dataStore.length; i++) {
        var show = document.getElementById("MainBox").innerHTML += (boxShow);

        var boxes = document.getElementById("boxMsg");

        boxes.querySelector("#titMsg").textContent = dataStore[i].fname  + " " +  dataStore[i].lname;
        boxes.querySelector("#yold").textContent = dataStore[i].yold;
    }

var数据存储=[{
fname:“凯拉”，
名字：“梅奥”，
约尔德：30
},
{
fname：“以撒”，
名字：“摩西”，
约尔德：20
},
{
fname:“Edwina”，
名字：“瑟琳娜”，
约尔德：34
},
{
fname:“蒂安娜”，
名字：“谢丽尔”，
约尔德：26
},
];
var boxShow=`





多恩
删除
`;
对于（var i=0；i您使用getElementById的方式很不正常，它不符合标准W3C。ID只能使用一次，并且ID是唯一的。您不能用同一ID标识多个标记。更改逻辑并获胜。使用Angular/Vue更好，主要部分已经为您完成了。
我认为您需要将for循环中的所有文章连接起来。然后，只有您附加到dom



文件
变量数据存储=[
{
fname:“凯拉”，
名字：“梅奥”，
约尔德：30
},
{
fname：“以撒”，
名字：“摩西”，
约尔德：20
},
{
fname:“Edwina”，
名字：“瑟琳娜”，
约尔德：34
},
{
fname:“蒂安娜”，
名字：“谢丽尔”，
约尔德：26
},
];
var-boxShow=`；
var元素=“”；
对于（var i=0；i${dataStore[i]['fname']}${dataStore[i]['lname']}



多恩
删除
`;
}
document.getElementById（“MainBox”）.innerHTML+=（boxShow）；
document.getElementById（“boxMsg”）.innerHTML+=元素；
你的HTML是什么？看起来里面有重复的id，这是无效的语法boxshow HTML有一个id元素，但是你多次将它添加到你的内容中。结果是有更多相同id的元素给你一个开始，你不能在元素上有两个相同的id，现在考虑一下并实现。你能做一个代码sni吗ppet？我的HTML``好的，但它是错误的。你必须使用类而不是id，你可以使用，但方法是错误的。