JavaScript表单添加姓名时旧值重复显示问题求助

你的代码出现重复显示的核心问题有两个：

1. list 变量定义在全局作用域，每次点击按钮都会把新生成的列表项追加到原有字符串后面，不会清空旧内容。
2. 每次点击都遍历整个 nameList 数组生成所有列表项，再加上 list 的累加逻辑，就会导致旧内容被重复渲染。

比如第一次输入"张三"，list 是 <li>张三</li>，显示正常；第二次输入"李四"，循环遍历包含两个元素的数组，list 就变成了旧的 <li>张三</li> + 新生成的 <li>张三</li><li>李四</li>，最终渲染出三个条目。

方案一：重置列表字符串（兼容原有逻辑） #

把 list 变量移到点击事件内部，每次点击都重新初始化，避免累加旧内容：

let inputvalue = document.querySelector("#womansname");
let addbtn = document.querySelector("#submit");
let displayname = document.querySelector(".taskList");

let nameList = [];

addbtn.addEventListener("click", (e)=> {
      e.preventDefault();
      // 过滤空输入
      const name = inputvalue.value.trim();
      if (!name) return;
      
      nameList.push(name);
      let list = ""; // 每次点击重置list
      for (let index = 0; index < nameList.length; index++) {
          list += `<li>${nameList[index]}</li>`;
      }

      displayname.innerHTML = list;
      inputvalue.value = "";
})

方案二：用数组方法简化渲染逻辑 #

利用数组的 map 方法生成列表项，再拼接成字符串，代码更简洁：

let inputvalue = document.querySelector("#womansname");
let addbtn = document.querySelector("#submit");
let displayname = document.querySelector(".taskList");

let nameList = [];

addbtn.addEventListener("click", (e)=> {
      e.preventDefault();
      const name = inputvalue.value.trim();
      if (!name) return;
      
      nameList.push(name);
      // 直接生成所有列表项的HTML字符串
      const listHtml = nameList.map(item => `<li>${item}</li>`).join('');
      displayname.innerHTML = listHtml;
      inputvalue.value = "";
})

方案三：只添加新项（性能更优） #

不需要每次重新渲染整个列表，直接创建新的列表项并追加到容器中，适合数据量较大的场景：

let inputvalue = document.querySelector("#womansname");
let addbtn = document.querySelector("#submit");
let displayname = document.querySelector(".taskList");

let nameList = [];

addbtn.addEventListener("click", (e)=> {
      e.preventDefault();
      const name = inputvalue.value.trim();
      if (!name) return;
      
      nameList.push(name);
      // 创建新的li元素并添加到列表
      const newLi = document.createElement('li');
      newLi.textContent = name;
      displayname.appendChild(newLi);
      inputvalue.value = "";
})

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