如何通过输入将任务按类别划分？适配现有JavaScript筛选功能

我来帮你搞定这个问题！你已经实现了任务筛选的核心逻辑，现在只需要添加表单提交的处理代码，让用户输入的任务能被现有筛选系统识别并展示。

第一步：补充任务容器 #

首先你需要一个专门存放任务的容器，在HTML的<h2>TASK TO</h2>下方添加这个容器：

<div id="taskContainer"></div>

所有新创建的任务都会被插入到这个容器里，方便筛选逻辑统一识别。

第二步：添加表单提交处理逻辑 #

把这段JavaScript代码加到你现有脚本的末尾，用来处理用户添加任务的操作：

// 监听表单提交事件
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 newTask = document.createElement("div");
  // 给任务元素添加筛选所需的类名：基础类filterDiv + 分类类名 + 默认显示的show类
  newTask.className = `filterDiv ${selectedCategory} show`;
  // 设置任务的显示文本
  newTask.textContent = taskContent;
  
  // 将新任务添加到容器中
  document.getElementById("taskContainer").appendChild(newTask);
  
  // 重置表单，方便用户继续添加
  this.reset();
});

关键细节修正 #

注意你原来的函数名存在不匹配的问题：filterSelection里调用的是w3RemoveClass和w3AddClass，但你定义的函数是removeClass和addClass，这会导致筛选功能失效。我已经在完整代码里统一了函数名：

// 修正后的添加类函数
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(" ");
}

完整整合后的代码 #

<form id="FORM">
  <label for="jmeno">Assigned task</label>
  <input type="text" id="homework" required />
  <label for="category">Category</label>
  <select name="selectCategory" id="category">
    <option value="">---</option>
    <option value="School" id="school">School</option>
    <option value="Work" id="work">Work</option>
  </select>
  <input type="submit" value="Add" />
</form>
<h2>TASK TO</h2>
<!-- 新增任务容器 -->
<div id="taskContainer"></div>
<div id="myBtnContainer">
  <button class="btn active" onclick="filterSelection('all')"> All</button>
  <button class="btn" onclick="filterSelection('school')"> To school</button>
  <button class="btn" onclick="filterSelection('work')"> To work</button>
</div>

<script>
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(" ");
}
// Add active class to the current button (highlight it)
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 newTask = document.createElement("div");
  newTask.className = `filterDiv ${selectedCategory} show`;
  newTask.textContent = taskContent;
  
  document.getElementById("taskContainer").appendChild(newTask);
  
  this.reset();
});
</script>

现在你点击"Add"按钮就能添加新任务，并且这些任务可以通过顶部的筛选按钮正常按类别过滤啦！

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