如何点击add按钮将任务推入taskList数组实现待办添加

核心错误点 #

• addTask触发函数逻辑写错：函数内执行taskList.push(list)时，list变量从未被定义，直接触发ReferenceError: list is not defined报错。你之前写的display()函数已经封装了「生成新任务数据、推入任务数组、渲染列表、持久化到本地存储」的完整流程，但addTask没有调用该逻辑，反而写了无效的push代码。
• renderList渲染逻辑有重复渲染问题：每次调用都会遍历全量任务数组往列表容器追加节点，已经渲染过的旧任务会重复出现在页面上。
• display函数内的data变量未加声明关键字，会污染全局作用域。
• deleteItem删除逻辑完全不符合预期：只会选中页面第一个任务节点删除，且直接清空整个本地存储，既没有按任务id删除对应项，也没有同步更新内存中的taskList数组。
• 缺少初始化渲染逻辑：页面首次加载/刷新时，没有读取本地存储的任务数据渲染到页面。
• 缺少输入校验：用户不填任何内容点+号也会生成空任务。

修复方案 #

• 重写addTask函数，加非空校验，调用已封装的新增任务逻辑，添加完成后清空输入框
• 调整renderList逻辑，每次渲染前先清空列表容器，再遍历渲染任务，避免重复
• 补全deleteItem逻辑，通过按钮上绑定的任务id过滤数组，同步更新本地存储后重渲染
• 补全页面初始化逻辑，加载时自动渲染本地已存任务
• 修复display函数的变量声明问题

修复后完整JS代码 #

// 本地存储key
const STORAGE_KEY = "tasks-storage-key";

// DOM节点缓存
const el = {
  form: document.querySelector(".form"),
  input: document.querySelector(".user-input"),
  list: document.querySelector(".list"),
  date: document.querySelector(".date"),
  time: document.querySelector(".time"),
};

// 生成唯一任务ID
const createId = () =>
  `${Math.floor(Math.random() * 10000)}${new Date().getTime()}`;

// 初始化任务数组，读取本地存储
let taskList = JSON.parse(window.localStorage.getItem(STORAGE_KEY) ?? "[]");

// 生成新任务数据对象
function makeNewTask() {
  const data = {
    id: createId(),
    taskNew: el.input.value.trim(),
    taskDate: el.date.value,
    taskTime: el.time.value,
  };
  return data;
}

// 新增任务全流程处理
function display() {
  const data = makeNewTask();
  taskList.push(data); 
  renderList(taskList); 
  storeList();
  // 清空输入框
  el.input.value = '';
  el.date.value = '';
  el.time.value = '';
}

// 渲染任务列表
function renderList(list) {
  // 先清空列表容器，避免重复渲染
  el.list.innerHTML = '';
  list.forEach(function (data) {
    const tasks = document.createElement("div");
    tasks.innerHTML = `
         <div class="task-content">
          <div class="task" data-id="${data.id}">
          <div class="new-task-created">${data.taskNew}</div>
          <label class="due-date">${data.taskDate}</label>
          <label class="due-time">${data.taskTime}</label>
      </div>
  
      <div class="action-buttons">
          <button onclick="editItem(event)" class="edit" data-id="${data.id}">Edit</button>
          <button onclick="deleteItem(event)" class="delete" data-id="${data.id}">Delete</button>
          <button onclick="completeItem(event)" class="complete" data-id="${data.id}">Complete</button>
      </div>
  </div>`;
    el.list.appendChild(tasks);
  });
}

// +按钮点击触发函数
function addTask() {
  // 非空校验
  if (!el.input.value.trim()) return;
  display();
}

// 持久化任务列表到本地存储
function storeList() {
  window.localStorage.setItem(STORAGE_KEY, JSON.stringify(taskList));
}

// 删除任务
function deleteItem(event) {
  const taskId = event.target.dataset.id;
  // 从数组中过滤掉要删除的任务
  taskList = taskList.filter(item => item.id !== taskId);
  // 同步更新本地存储
  storeList();
  // 重渲染列表
  renderList(taskList);
}

// 编辑任务（可自行补全逻辑）
function editItem() {}

// 标记任务完成
function completeItem(event) {
  const element = event.target.closest(".task-content");
  const taskItem = element.querySelector(".new-task-created");
  const dateItem = element.querySelector(".due-date");
  const timeItem = element.querySelector(".due-time");
  taskItem.style.textDecoration = "line-through";
  dateItem.style.textDecoration = "line-through";
  timeItem.style.textDecoration = "line-through";
}

// 页面初始化时渲染已有任务
renderList(taskList);

HTML部分无需修改，直接替换JS代码即可正常运行：支持新增任务、本地持久化、删除任务、标记完成功能，不会再出现之前的变量未定义报错和重复渲染问题。

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