如何通过输入实现任务分类划分？基于JavaScript的任务添加实现

看起来你已经搞定了任务筛选的核心功能，现在就差添加任务并关联分类这一步啦！你的思路没错，确实可以通过分类标识来关联任务和筛选逻辑，下面我给你一步步拆解实现方法：

1. 先给任务加个存放容器 #

首先在HTML里，筛选按钮下方添加一个容器，用来承载后续动态生成的任务：

<div id="taskContainer">
  <!-- 动态添加的任务会放在这里 -->
</div>

2. 扩展JavaScript逻辑，实现表单提交与任务创建 #

我们需要监听表单的提交事件，阻止默认跳转行为，然后获取输入的任务内容和选中的分类，创建带对应分类标识的任务元素，最后把它加到页面里。直接修改你的JS代码就行：

filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}
function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  }
}
function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);
    }
  }
  element.className = arr1.join(" ");
}
// 给筛选按钮添加高亮逻辑
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

// 新增：处理表单提交，动态添加任务
document.getElementById("FORM").addEventListener("submit", function(e) {
  e.preventDefault(); // 阻止表单默认跳转刷新页面
  
  // 获取用户输入的任务和选中的分类
  const taskContent = document.getElementById("homework").value.trim();
  const selectedCategory = document.getElementById("category").value.toLowerCase();
  
  // 简单验证：任务内容不能为空，必须选分类
  if (!taskContent || !selectedCategory) {
    alert("请填写任务内容并选择分类哦！");
    return;
  }
  
  // 创建任务元素
  const taskItem = document.createElement("div");
  // 核心：加上筛选需要的filterDiv类，以及对应分类的类名，默认显示
  taskItem.className = `filterDiv ${selectedCategory} show`;
  taskItem.textContent = taskContent;
  
  // 把任务加到容器里
  document.getElementById("taskContainer").appendChild(taskItem);
  
  // 清空表单，方便用户继续添加
  document.getElementById("homework").value = "";
  document.getElementById("category").value = "";
});

3. 补充基础样式（可选但推荐） #

为了让任务和按钮看起来更舒服，加一点简单CSS：

.filterDiv {
  display: none; /* 默认隐藏，通过show类控制显示 */
  margin: 8px 0;
  padding: 12px 16px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.show {
  display: block;
}

.btn {
  border: none;
  outline: none;
  padding: 10px 14px;
  background-color: #f1f1f1;
  cursor: pointer;
  margin-right: 6px;
  border-radius: 4px;
}

.btn.active {
  background-color: #4CAF50;
  color: white;
}

核心逻辑说明： #

• 把选中的分类值转成小写，和筛选函数里的school、work类名保持一致，确保筛选能精准匹配
• 新任务必须包含filterDiv类（这是筛选函数查找的目标类），同时加上对应分类的类名，这样点击筛选按钮时才能被正确归类
• 默认给任务加show类，添加后就能直接显示，不用手动触发筛选
• 表单提交后清空输入框，提升用户体验

这样修改后，你就能通过输入框添加任务，任务会自动归到对应分类下，点击筛选按钮也能正确显示/隐藏对应分类的任务啦！

内容的提问来源于stack exchange，提问作者Eliška Doležalová