JS待办列表：点击按钮+回车添加任务及清空后提示恢复问题求助

问题 #

1. 需实现点击按钮+回车均可添加任务，不使用form+preventDefault()方案
2. 删除所有任务后，"There are no pending tasks."提示无法重新显示

解决方法 #

1. 多触发方式添加任务 #

把添加任务的核心逻辑封装成独立函数，分别给输入框绑定keypress事件（监听回车）、给按钮绑定click事件，调用同一个函数即可实现两种触发方式。

2. 修复提示显示逻辑 #

• 原代码判断taskContainer === null完全错误：taskContainer是页面初始就存在的元素，永远不会为null。正确逻辑是判断容器内的任务项（.item-task）数量是否为0
• 删除任务后需要重新检查剩余任务数量，根据结果控制提示的显示/隐藏

修改后的完整JS代码 #

let board = document.querySelector('.to-do-board');
let taskContainer = document.querySelector('.container-task');
let taskbar = document.querySelector('.add-task');
let button = document.querySelector('.add-btn');
let noTasksMsg = document.querySelector('.message');

// 封装添加任务的核心函数
function addTask() {
    if (taskbar.value.trim() === '') return;

    // 隐藏无任务提示
    noTasksMsg.style.display = 'none';

    // 创建任务项
    let div = document.createElement('div');
    div.className = 'item-task';
    div.innerHTML = taskbar.value;
    taskContainer.insertAdjacentElement('beforeend', div);

    // 创建删除按钮
    let deleteButton = document.createElement('button');
    deleteButton.className = 'deleteBtn';
    deleteButton.textContent = "X";
    div.appendChild(deleteButton);

    // 清空输入框
    taskbar.value = '';

    // 删除任务逻辑，删除后检查是否需要显示提示
    deleteButton.addEventListener('click', () => {
        div.remove();
        checkTaskCount();
    });
}

// 检查任务数量，控制提示显示
function checkTaskCount() {
    let taskItems = document.querySelectorAll('.item-task');
    noTasksMsg.style.display = taskItems.length === 0 ? 'block' : 'none';
}

// 绑定回车事件
taskbar.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') addTask();
});

// 绑定按钮点击事件
button.addEventListener('click', addTask);

// 页面加载时初始化提示状态
checkTaskCount();

代码修改说明 #

• 新增addTask()函数，迁移原回车事件内的添加逻辑，实现代码复用
• 新增checkTaskCount()函数，专门负责检查任务数量并控制提示显示，在页面加载、添加任务、删除任务后均调用
• 按钮点击事件直接调用addTask()，实现点击添加功能
• 删除任务后调用checkTaskCount()，确保所有任务删除后提示重新显示
• 输入框值判断增加trim()，避免空字符串或纯空格的无效任务被添加

HTML和CSS说明 #

原HTML和CSS无需修改，保持原样即可正常运行。

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