JavaScript HTML DOM待办列表问题：点击添加按钮重复显示旧元素

你的问题出在每次点击ADD按钮时，代码会遍历整个tasks数组，把所有元素都重新创建<p>标签添加到页面，所以第二次点击时会把第一个元素再显示一遍。要实现只添加最新的元素，只需要修改addV函数，直接取数组最后一个元素来创建新标签即可：

修改后的JavaScript代码 #

let tasks = []

function addV() {
  let x = document.getElementById("bara")
  // 空值不添加，避免无效任务
  if (!x.value.trim()) return
  
  tasks.push(x.value)
  // 创建新标签存放最新的任务
  const p = document.createElement("p")
  p.innerText = tasks[tasks.length - 1]
  // 把新任务放到指定的容器中，比直接追加到body更规范
  document.getElementById("t").appendChild(p)
  
  // 清空输入框，方便下次输入
  x.value = ""
  console.log(tasks)
}

对应的HTML代码（无需修改） #

<!DOCTYPE html>
<html>

<head>
  <title>To Do</title>
</head>

<body>
  <script src="motor.js"></script>
  <p>Task</p>
  <input type="search" placeholder="task" id="bara">
  <button onclick="addV()">ADD</button>
  <hr>
  <h1>TO DO TASKS</h1>
  <p id="t"></p>
</body>

</html>

额外做了两个小优化：

• 增加空值判断，防止添加空白任务
• 添加完成后自动清空输入框，提升使用体验

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