JavaScript-在DOM中遍历对象-堆栈溢出

顺晟科技

2022-10-19 13:36:06

150

尝试通过按button来遍历objet&array并显示DOM中的每个对象，但只要按下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>

顺晟科技：

您可以创建一个变量并存储当前索引，然后在该特定索引处获取元素，然后在末尾递增该元素。这就是如何一个接一个地获得并持续到最后。

只需在这里查看您的代码。

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

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

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

，现在当循环为索引1运行时，那么（bob和25）存储在相同的h1标记中。所以，以前的值消失了。所以这样循环一直运行到最后一个索引。因此，它只显示数组的最后一个值。

有一个解决办法你可以做。我已经修改了您的代码。

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

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

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

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

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

上一篇：HTML-谁负责为'body'元素建下一篇：html-git点是如何在网站上显示

网站建设

Html

JavaScript-在DOM中遍历对象-堆栈溢出