问题在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;
    }
最佳答案
我认为你需要连接for循环中的所有文章.然后只有你附加到dom.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="MainBox"></div>
    <script>
        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"></div>`;
        var elements = '';

        for (var i = 0; i < dataStore.length; i++) {
            elements += `<article class="media">
                            <div class="media-content">
                                <div class="content">
                                    <p>
                                        <strong>${dataStore[i]['fname']}</strong> <small>${dataStore[i]['lname']} </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>`;
        }

        document.getElementById("MainBox").innerHTML += (boxShow);
        document.getElementById("boxMsg").innerHTML += elements;
    </script>
</body>

</html>

转载注明原文:问题在JavaScript中加载元素内部的数据 - 代码日志