Menu
I have a problem with JavaScript.Inside my Array I have some objects and I tried to load all of them inside some Elements , Problem is when I tried return my Elements inside "for" and set objects for each one it's not work, I mean it just return last one with data and other box (elements) are empty
This is my JavaScript Code
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;
}
762
I think you need to concatenate all articles in the for loop. Then only you append to the 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
