JavaScript错误：`ReferenceError：未定义文档`

Question

尝试运行代码时得到ReferenceError: document is not defined。我感觉这可能与我使用查询选择器的方式有关，但是在本教程中，我跟踪它们执行相同的操作，因此我不确定为什么它对我不起作用。

<!-- index.html -->

    <div class="row">
        <div class="col-sm-8 col-md-7 col-xl-5 mx-auto">
          <form id="search">
              <input id="searchbox" autocomplete="off" placeholder="Search for the name of a jobsite." class="form-control" type="search"/>
          </form>
        </div>
    </div>

    <div class="row">
      <div id="camera-list" class="col-sm-8 col-md-7 col-xl-5 mx-auto">
        <ul>
            <li style="display: block;">
              <span class="name"> camera1 </span>
              <span class="jobSite">jobsite1</span>
              <span class="siren">Siren</span>
            </li>
            <li style="display: block;">
                <span class="name">camera2</span>
                <span class="jobSite">jobsite2</span>
                <span class="siren">Siren</span>
              </li>
              <li style="display: block;">
                  <span class="name">camera3</span>
                  <span class="jobSite">jobsite1</span>
                  <span class="siren">Siren</span>
              </li>
        </ul>
      </div>
    </div>

// search.js

const list = document.querySelector('#camera-list ul')
const forms = document.forms;

// Update the results on every key stroke
const searchBar = document.forms['search'].querySelector('input');
searchBar.addEventListener('keyup', function(e){
  const term = e.target.value.toLowerCase();
  const cameras = list.getElementsByTagName('li');

  Array.from(cameras).forEach(function(camera){
    const jobSite = camera.childNodes[1].textContent;
    if(jobSite.toLowerCase().indexOf(term) != -1){
      camera.style.display = 'block'
    } else {
      camera.style.display = 'none'
    }
  })
});

我似乎无法弄清楚哪里出了问题，任何帮助将不胜感激！