任务列表按优先级/状态筛选功能失效，请求修复并讲解代码

问题描述 #

需要实现按优先级筛选任务列表的功能：用户选择low时仅显示低优先级任务；但目前选择low或筛选已完成任务时均无内容显示，需修复代码并讲解正确实现方式。

错误原因分析 #

1. 变量名大小写不匹配：全局变量是taskList，但筛选函数里写成了tasklist（小写L），导致无法获取任务DOM元素。
2. 优先级匹配字符串不匹配：筛选时从DOM文本中提取的是Priority: low完整字符串，但筛选控件的值是low，直接全等判断失败。
3. 状态筛选逻辑缺陷：初始调用filterByStatus(null)，且状态筛选未和优先级筛选联动，导致多条件筛选时只会生效最后一次操作。
4. 表单提交未阻止默认行为：添加任务时表单默认刷新页面，导致任务添加后丢失。

修复后的完整代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task Manager</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="navbar">
        <a href="index.html">Home</a>
        <a href="aboutUs.html">About</a>
    </div>
      
    <h2>Task Manager</h2>
    <button id="color-changer" type="button">Change Background Colors</button>

    <form id="taskForm">
        <label for="title">Title:</label>
        <input type="text" id="title" required>

        <label for="description">Description:</label>
        <textarea id="description" rows="4" placeholder="Type your description here"></textarea>

        <label for="dueDate">Due Date:</label>
        <input type="date" id="dueDate" required>

        <label for="priority">Priority:</label>
        <select id="priority" required>
            <option value="" disabled selected hidden>Select Priority</option>
            <option value="low">Low</option>
            <option value="medium">Medium</option>
            <option value="high">High</option>
        </select>

        <div class="statusContainer" id="statusContainer">
            <label for="status">Status:</label>
            <input type="checkbox" id="status">
            <label for="status">Done</label>
        </div>

        <button type="submit">Add Task</button>
    </form>

    <div class="task-list">
        <h2>Tasks List</h2>
        <select id="priorityFilter">
            <option value="">All Priorities</option>
            <option value="low">Low</option>
            <option value="medium">Medium</option>
            <option value="high">High</option>
        </select>
        
        <select id="statusFilter">
            <option value="all">All Statuses</option>
            <option value="done">Done</option>
            <option value="not-done">Not Done</option>
        </select>
        
        <div id="taskList">
            <ul></ul>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

JavaScript代码 #

const taskForm = document.getElementById('taskForm');
const taskList = document.querySelector('#taskList ul');
const priorityFilter = document.getElementById('priorityFilter');
const statusFilter = document.getElementById('statusFilter');

// 存储任务数据，避免从DOM解析的错误
let tasks = [];

// 添加任务
taskForm.addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认刷新行为

    const title = document.getElementById('title').value;
    const description = document.getElementById('description').value;
    const dueDate = document.getElementById('dueDate').value;
    const priority = document.getElementById('priority').value;
    const status = document.getElementById('status').checked;

    if (!title || !description || !dueDate || !priority) {
        alert('Please fill in all the required fields.');
        return;
    }

    const task = {
        id: Date.now(), // 唯一ID，方便编辑/删除
        title,
        description,
        dueDate,
        priority,
        status
    };

    tasks.push(task);
    renderTasks(); // 重新渲染任务列表
    taskForm.reset();
    alert('Form submitted successfully!');
});

// 渲染任务列表
function renderTasks() {
    taskList.innerHTML = '';
    tasks.forEach(task => {
        const listItem = document.createElement('li');
        listItem.dataset.id = task.id; // 绑定任务ID到DOM
        listItem.innerHTML = `
            <div class="form">
                <strong>Title: ${task.title}</strong>
                <p>Description: ${task.description}</p>
                <small>Due Date: ${task.dueDate} | Priority: ${task.priority} | Status: ${task.status ? 'Done' : 'Not Done'}</small>
            </div>
            <div class="task-actions">
                <button class="action-edit" onclick="editTask(${task.id})">Edit</button>
                <button class="action-delete" onclick="deleteTask(${task.id})">Delete</button>
            </div>
        `;
        taskList.appendChild(listItem);
    });
}

// 编辑任务
function editTask(taskId) {
    const taskIndex = tasks.findIndex(t => t.id === taskId);
    if (taskIndex === -1) return;

    const task = tasks[taskIndex];
    // 填充表单
    document.getElementById('title').value = task.title;
    document.getElementById('description').value = task.description;
    document.getElementById('dueDate').value = task.dueDate;
    document.getElementById('priority').value = task.priority;
    document.getElementById('status').checked = task.status;

    // 从数组和DOM中移除任务
    tasks.splice(taskIndex, 1);
    renderTasks();
}

// 删除任务
function deleteTask(taskId) {
    tasks = tasks.filter(t => t.id !== taskId);
    renderTasks();
}

// 联动筛选函数
function filterTasks() {
    const selectedPriority = priorityFilter.value;
    const selectedStatus = statusFilter.value;

    const filteredTasks = tasks.filter(task => {
        // 优先级筛选
        const priorityMatch = !selectedPriority || task.priority === selectedPriority;
        // 状态筛选
        let statusMatch = true;
        if (selectedStatus === 'done') {
            statusMatch = task.status === true;
        } else if (selectedStatus === 'not-done') {
            statusMatch = task.status === false;
        }
        return priorityMatch && statusMatch;
    });

    // 根据筛选结果更新DOM显示
    const allTaskItems = taskList.querySelectorAll('li');
    allTaskItems.forEach(item => {
        const taskId = parseInt(item.dataset.id);
        const isMatch = filteredTasks.some(t => t.id === taskId);
        item.style.display = isMatch ? 'block' : 'none';
    });
}

// 绑定筛选事件
priorityFilter.addEventListener('change', filterTasks);
statusFilter.addEventListener('change', filterTasks);

// 背景色切换功能
const button = document.getElementById('color-changer');
const body = document.body;
const colors = {
    light: { backgroundColor: '#f5f5f5', textColor: '#333' },
    dark: { backgroundColor: '#A3E2F9', textColor: '#000' }
};
let currentColorScheme = colors.light;
body.style.backgroundColor = currentColorScheme.backgroundColor;
body.style.color = currentColorScheme.textColor;

button.addEventListener('click', () => {
    currentColorScheme = currentColorScheme === colors.light ? colors.dark : colors.light;
    body.style.backgroundColor = currentColorScheme.backgroundColor;
    body.style.color = currentColorScheme.textColor;
});

// 初始化渲染
renderTasks();

修复要点讲解 #

1. 修正变量名错误：将筛选函数中的tasklist改为taskList，确保能正确获取任务列表DOM元素。
2. 改用任务数组存储数据：不再依赖DOM文本解析任务信息，而是用数组存储任务对象，避免字符串拆分的错误，同时让筛选、编辑、删除逻辑更可靠。
3. 实现多条件联动筛选：合并两个筛选函数为filterTasks，同时判断优先级和状态条件，确保筛选结果是两个条件的交集。
4. 阻止表单默认行为：给表单绑定submit事件，调用event.preventDefault()避免页面刷新丢失任务。
5. 优化编辑/删除逻辑：用任务ID关联DOM和数组数据，操作更精准，避免从DOM解析文本的误差。
6. 修复状态筛选逻辑：支持all/done/not-done三种状态筛选，判断逻辑更清晰。

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