循环遍历 DOM 中的对象

Question

尝试通过按下按钮循环遍历对象和数组并显示 DOM 中的每个对象，但一旦我按下按钮，它只会显示最后一个对象

<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>

Answer 1

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

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

Answer 2

您可以创建一个index 变量并存储当前索引，然后获取该特定索引处的元素，然后在最后增加它。这样你就可以一一获得name和age直到最后。

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)

let index = 0;

function show() {
  if (index < info.length) {
    name1.textContent = info[index].name;
    age.textContent = info[index].age;
    index++;
  }
}

<button id="btn">press</button>
<h1 id="name">name </h1>
<h1 id="age">age</h1>