点击按钮循环遍历DOM中对象与数组时仅显示最后一个对象问题问询

问题根因 #

每次触发点击事件时，你的代码都会完整遍历整个数组，每一轮循环都会直接覆盖DOM节点的文本内容，循环执行结束后页面自然只会保留数组最后一项的内容。另外你代码中的循环变量i没有加声明关键字，会隐式创建为全局变量，存在变量污染风险。

修复方案 #

根据你的实际需求可以选择以下两种实现：

场景1：每次点击按钮切换展示下一条数据，循环遍历

在全局作用域声明一个变量记录当前展示的数组下标，每次点击按钮时下标自增，通过对数组长度取余实现循环效果，再将对应下标的数据渲染到页面即可。
完整代码：

<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"}]
  // 记录当前展示的数组下标
  let currentIndex = 0

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

btn.addEventListener('click', show)

// 页面加载默认展示第一条，不需要可以删掉
show()

function show(){
  name1.innerHTML = info[currentIndex].name
  age.innerHTML = info[currentIndex].age
  // 下标自增后对数组长度取余，超过数组长度自动回到0
  currentIndex = (currentIndex + 1) % info.length
}
 </script>
</body>
</html>

场景2：点击一次按钮就将所有数组内容全部展示在页面

修改循环内的赋值逻辑为拼接内容即可：

function show(){
  // 先清空原有内容避免重复拼接
  name1.innerHTML = '姓名：<br>'
  age.innerHTML = '年龄：<br>'
  for(let i = 0; i < info.length; i++){
    name1.innerHTML += info[i].name + '<br>'
    age.innerHTML += info[i].age + '<br>'
  }
}

内容的提问来源于stack exchange，提问作者wale