javascript - 由于上下文丢失，我的文档未定义

Question

使用 vanilla.js，我的代码如下所示：

class Restaurant {
  constructor() {
    this.menu = [];
    this.categories = ['all'];
  }
  handleSearch(event) {
    const searchInput = document.querySelector('.search-input');
    const minPriceInput = document.querySelector('.min-price');
    const maxPriceInput = document.querySelector('.max-price');
    if (event.target.matches('.search-btn')) {
      event.preventDefault();
      const keyword = searchInput.value.toLowerCase();
      const minPrice = minPriceInput.value || 0;
      const maxPrice = maxPriceInput || Infinity;
      let category = docuemnt.querySelector(".filter-active").dataset.id;
      let filteredMenu = [];
      if (category === this.categories[0]) { // categories[0] is "all";
        filteredMenu = menu.filter(item => {
          return item.title.includes(keyword) && item.price >= minPrice && item.price <= maxPrice;
        })
        this.renderMenu(filteredMenu);
      } else {
        filteredMenu = menu.filter(item => {
          return item.category === selectedCategory && item.title.includes(keyword) && item.price >= minPrice && item.price <= maxPrice;
        })
        this.renderMenu(filteredMenu);
      }
    }
  }
  render() {
    const buttonsContainer = document.querySelector('.btn-container');
    const searchButton = document.querySelector('.search-btn');
    buttonsContainer.addEventListener('click', this.handleFilter.bind(this));
    searchButton.addEventListener('click', this.handleSearch.bind(this));
    this.setCategories();
    this.renderButtons();
    this.renderMenu(this.menu);
  }
}

我的文档对象在 handleSearch 方法中未定义。是否可以在不将所有元素变量放在方法之外的情况下解决这个问题？即使我这样做了，我还有另一个变量“类别”正在使用文档对象。

标签： javascriptdom