时间戳

首页 > 解决方案 > looping through object in the DOM

javascript - looping through object in the DOM

问题描述

try to loop through objet & array by pressing button and show every object inside the DOM but it's just show the last objet once i press the button

<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <button id="btn">press</button>
 <h1 id="name">name </h1>
 <h1 id="age">age</h1>
 <script >
  const info =[{name : "john", age :"20"},{name : "bob", age :"25"},{name : "wil", age :"30"}]


const btn = document.getElementById('btn')
const name1 = document.getElementById('name')
const age = document.getElementById('age')

btn.addEventListener('click', show)

function show(){

 for( i = 0; i < info.length; i++){
 name1.innerHTML = info[i].name
 age.innerHTML = info[i].age
  
 }
console.log(info);
}
 </script>
</body>
</html>

标签： javascriptphphtmlcssreactjs

解决方案

只需在此处查看您的代码。

for( i = 0; i < info.length; i++){
 name1.innerHTML = info[i].name
 age.innerHTML = info[i].age
  
 }

当第一次循环运行时（对于索引 0），它将值（john 和 20）存储在 html h1 标记中。

 <h1 id="name">name </h1>
 <h1 id="age">age</h1>

现在，当针对索引 1 运行循环时，（bob 和 25）将存储在相同的 h1 标签中。因此，以前的值消失了。所以通过这种方式，循环一直运行到最后一个索引。因此，它只显示数组的最后一个值。

有一个你可以做的解决方案。我已经修改了你的代码。

 for( i = 0; i < info.length; i++){
    if (i = 0){
        name1.innerHTML = info[i].name
        age.innerHTML = info[i].age
    }
    else{
        name1.innerHTML += info[i].name
        age.innerHTML += info[i].age
    }

  
 }

这样，所有的名字和年龄都将显示在 h1 标签中。这只是为了基本了解您在哪里做错了。

如果您想在不同的 h1 标签上显示每个姓名和年龄对。您可以使用节点。您在 Javascript 中创建 h1 元素，然后将文本放入 h1 中，然后使用 appendChild 将其作为最后一个子元素放置在您想要放置的任何 div 中，或者您可以使用 insertBefore 将其放置为第一个子元素。

您可以查看下面提到的 W3Schools 的链接，以了解如何在 html 中创建和附加元素节点。

https://www.w3schools.com/jsref/met_node_appendchild.asp

推荐阅读