JS开发中makeNewTask返回的data对象无法传入display函数问题排查

问题表现 #

开发待办任务新增模块时，定义了存储任务ID、任务输入内容、截止日期、时间信息的data对象，配套HTML输入元素与新增触发按钮，预期逻辑为makeNewTask()构造完成data对象后返回结果，传入display(data)函数完成任务渲染。实际点击新增按钮时触发JS错误，display函数内访问data.id等属性时因data为undefined抛出类型错误，任务无法正常渲染到页面。

关联代码 #

HTML部分 #

<div class="form">
    <input class ="user-input" type="text">
    <input class="date" type="date">
    <input class="time" type="time">
    <button onclick="addTask()" class="add" id="add">+</button>
</div>

JS部分 #

const el = {
  form: document.querySelector(".form"),
  input: document.querySelector(".user-input"),
  list: document.querySelector(".list"),
  date: document.querySelector(".date"),
  time: document.querySelector(".time"),
};

function makeNewTask() {
  const data = {
    id: createId(),
    taskNew: el.input.value,
    taskDate: el.date.value,
    taskTime: el.time.value,
  };
  return data
}
// 渲染带日期时间的新任务
function display(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()" class="edit" data-id="${data.id}">Edit</button>
        <button onclick="deleteItem()" class="delete" data-id="${data.id}">Delete</button>
        <button onclick="completeItem()" class="complete" data-id="${data.id}">Complete</button>
    </div>
</div>`;

  taskList.push(data);
  el.list.appendChild(tasks);
  makeNewTask();
}

// 新增任务触发函数
function addTask() {
  display();
}

问题根因 #

• 核心逻辑断裂：addTask()作为按钮触发的入口函数，调用display()时没有传入任何参数。display函数明确定义需要接收data作为入参，无参调用时形参data默认值为undefined，后续访问其属性必然抛出错误。
• 冗余无效代码：display函数末尾调用了makeNewTask()，但既没有接收返回值也没有做后续处理，执行后创建的data对象会被直接回收，没有任何实际作用。

修复代码 #

调整addTask函数逻辑，先调用makeNewTask()获取构造完成的任务数据，再将数据传入display执行渲染，同时移除display内冗余的makeNewTask()调用：

// 修正后的新增触发函数
function addTask() {
  const newTaskData = makeNewTask();
  display(newTaskData);
}

// 修正后的渲染函数
function display(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()" class="edit" data-id="${data.id}">Edit</button>
        <button onclick="deleteItem()" class="delete" data-id="${data.id}">Delete</button>
        <button onclick="completeItem()" class="complete" data-id="${data.id}">Complete</button>
    </div>
</div>`;

  taskList.push(data);
  el.list.appendChild(tasks);
  // 移除此处多余的makeNewTask()调用
}

补充优化建议：可以在makeNewTask()内增加输入校验，比如任务内容为空时直接返回、阻止后续渲染，避免生成空任务。

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