如何修复JavaScript表单alert提醒逻辑的null值异常

• 按钮绑定的onclick="addTask()"没有传入任何参数，addTask声明的三个形参实际值全为undefined，而undefined == null判断结果为true，所以无论输入框填什么内容都会触发alert。
• 空输入框的value是空字符串""而非null，原有判断逻辑无法正确识别空输入场景。
• 校验逻辑没有做拦截，就算字段为空，代码依然会执行creatTask()生成空任务。
• 输入值取值逻辑写在creatTask内部，校验阶段拿不到输入框的实时值，校验完全失效。

JavaScript部分 #

// DOM元素映射
const el = {
  form: document.querySelector(".form"),
  input: document.querySelector(".user-input"),
  list: document.querySelector(".list"),
  date: document.querySelector(".date"),
  time: document.querySelector(".time")
};
// 本地存储键名
const storage_key = "tasks-storage-key";

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

// 任务存储数组
let taskList = [];

// 创建任务节点并渲染到页面
const creatTask = (taskNew, taskDate, taskTime) => {
  const id = createId();
  const tasks = document.createElement("div");

  tasks.innerHTML = `
    <div class="task-content">
      <div class="list-of-task">
        <div class="task" data-id="${id}">
          <input type="checkbox" class="tick">
          <div class="new-task-created">${taskNew}</div>
          <label class="due-date">${taskDate}</label>
          <label class="due-time">${taskTime}</label>
        </div>
        <div class="atcion-buttons">
          <button class="edit" data-id="${id}">编辑</button>
          <button class="delete" data-id="${id}">删除</button>
        </div>
      </div>
    </div>`;

  taskList.push(tasks);
  el.list.appendChild(tasks);
  // 提交后清空输入框
  el.input.value = '';
  el.date.value = '';
  el.time.value = '';
};

// 添加任务入口（含校验逻辑）
function addTask() {
  // 入口处统一获取输入框实时值，任务内容自动去除首尾空格
  const taskNew = el.input.value.trim();
  const taskDate = el.date.value;
  const taskTime = el.time.value;

  // 校验不通过直接终止逻辑，弹出对应提示
  if (!taskNew) {
    alert("请输入任务内容");
    return;
  }
  if (!taskDate) {
    alert("请选择任务截止日期");
    return;
  }
  if (!taskTime) {
    alert("请选择任务截止时间");
    return;
  }

  // 所有校验通过后再创建任务
  creatTask(taskNew, taskDate, taskTime);
}

HTML部分 #

<div class="form">
  <input class="user-input" type="text" placeholder="输入任务内容">
  <input class="date" type="date">
  <input class="time" type="time">
  <button onclick="addTask()" class="add" id="add">+</button>
</div>
<div class="list"></div>

• 移除了onclick传参的逻辑，直接在addTask入口从DOM元素获取实时输入值，彻底解决参数为undefined导致的误判问题
• 用!value的判断逻辑覆盖空字符串、undefined、null三类空值场景，对任务内容增加trim()处理，避免用户输入全空格的无效任务
• 每个校验分支触发alert后增加return终止执行，不会在校验失败时生成空任务
• 修复了原代码中编辑、删除按钮data-id为空的问题，绑定生成的唯一任务ID，方便后续实现编辑、删除功能
• 任务提交成功后自动清空所有输入框，优化使用体验

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