JavaScript中input事件下filterField对象属性值无法更新的问题

你遇到的筛选逻辑失效，核心是事件回调内的JS运算符使用错误，属于跟教程敲代码时非常容易出现的手滑类隐蔽bug：
在绑定到输入框的input事件回调中，你原本打算把输入框的实时值赋值给filterField.searchText，但误把赋值用的单等号=，写成了用于值比较的严格相等运算符===。

这行错误的代码filterField.searchText === e.target.value;执行时，只会临时做一次值的相等校验，校验完的结果会被直接丢弃，完全不会修改原filterField对象的属性值，属于没有任何实际副作用的无效代码。最终filterField.searchText会始终停留在初始的空字符串状态，每次触发事件调用renderNotes时，传入的筛选条件从未更新，自然无法按照输入内容完成笔记筛选。

小补充：这类bug排查起来相对隐蔽——因为代码没有语法问题，运行时也不会抛出报错，只会悄无声息的不生效，很容易把排查方向错带到DOM绑定、数据结构定义的问题上。另外你写的注释里提到的filteredField属于笔误，实际定义的对象名是filterField，注释问题不影响代码运行。

只需要把事件回调里的比较运算符替换为赋值运算符即可，修改后的事件绑定代码如下：

document.querySelector('#search-text').addEventListener('input', function (e) {
  // 把输入框的实时value赋值给filterField的searchText属性
  filterField.searchText = e.target.value;
  renderNotes(habits, filterField);
})

如果修改后仍未达到预期效果，可以临时在赋值行后加一行日志打印console.log(filterField.searchText)，确认输入框的事件确实能正常触发、可以拿到对应输入值，排除因为DOM选择器写错（比如#search-text对应的元素不是预期的输入框、或者根本不存在）导致的其他隐性问题。

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