前端运动员搜索项目：同名运动员搜索仅显示最后一条结果的问题求助

嘿，我一眼就瞅出问题所在了——你每次循环都在覆盖结果容器的内容，再加上创建的列表项根本没插入到页面里，所以最后只显示了最后一条匹配数据！

问题根源 #

看你这段核心代码：

const output = results.innerText =`Here are your details: ...`
list.append(output)

1. results.innerText = ... 每次赋值都会把之前的内容完全替换掉，循环执行3次的话，前两次的内容都会被第三次覆盖，最后页面就只剩最后一条数据。
2. 你创建了<li>元素，但只是把字符串output加到了这个li里，却从来没把这个li添加到results容器中——等于这个li根本没出现在页面的DOM结构里，自然看不到。

修复后的代码 #

调整逻辑，先清空容器，再逐个创建列表项并添加到页面：

finder.addEventListener('click',function(){ 
  let find = search.value.trim(); // 加trim避免输入前后空格导致匹配失败
  const res = data.filter(data => data.firstName === find);
  
  // 先清空结果容器，避免旧内容残留
  results.innerHTML = '';
  
  for (let i=0; i < res.length;i++) { 
    const listItem = document.createElement('LI');
    // 把内容设置到列表项的文本里
    listItem.innerText = `Here are your details: Member Name: ${res[i].firstName}, ${res[i].lastName}, Age: ${res[i].age}, Club: ${res[i].club}, EaNumber: ${res[i].eanum}`;
    // 把列表项添加到结果容器中
    results.appendChild(listItem);
  } 
})

更简洁的写法（用forEach） #

如果觉得for循环麻烦，也可以用数组的forEach方法，代码更清爽：

finder.addEventListener('click',function(){ 
  const find = search.value.trim();
  const res = data.filter(item => item.firstName === find);
  
  results.innerHTML = '';
  
  res.forEach(item => {
    const listItem = document.createElement('LI');
    listItem.innerText = `Here are your details: Member Name: ${item.firstName}, ${item.lastName}, Age: ${item.age}, Club: ${item.club}, EaNumber: ${item.eanum}`;
    results.appendChild(listItem);
  });
})

这样修改后，所有匹配的运动员数据都会以列表项的形式显示在页面上，不会再被覆盖啦～

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