Ввод поиска не найден JavaScript

Question

Здравствуйте, я впервые задаю здесь вопрос, поэтому, пожалуйста, простите меня за любые ошибки формата.
Я пытаюсь выполнить поиск в реальном времени на веб-странице, которая использует HTML, JavaScript, CSS и PHP. Проблема, с которой я сталкиваюсь, заключается в том, что мой JavaScript не может найти мой идентификатор ввода поиска, поэтому я получаю эту ошибку при загрузке веб-страницы:

   Uncaught TypeError: Cannot read property 'addEventListener' of null at search.js:3

Вот фрагмент js и html:

var search_bar = document.getElementById("_input");
console.log(search_bar);
search_bar.addEventListener('input', package_search);
var _package = document.getElementsByClassName('panel-title');
var package_array = [];

while (_package.lenth > 0) {
  var P_names = _package[0].querySelector("package_name").textContent;
  var package_obj = {
    name: P_names
  };
  package_array.push(packagae_obj);
  console.log(package_obj);
  P_names[0].remove();
}

function package_search() {
  var input = search_bar.value;
  var filter = input.toUpperCase();
  var package_name = document.getElementsByClassName("panel-heading");
  var _name = document.getElementsByClassName("panel-title");
  var a, txtValue, i;
  console.log(_name);
  for (i = 0; i < _name.length; i++) {
    txtValue = _name[0].textContent || _name[0].innertext;
    if (txtValue.toUpperCase().includes(filter)) {
      package_name[i].style.display = "";
    } else {
      package_name[i].style.display = "none";
    }
  }
}

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <h3>Packages</h3>
      <div class="search_bar" id="search_bar">
        <ul class="search_" id="search_" style="margin-left: 66%; margin-top: -5%;">
          <li class="search_box">
            <input type="text" id="_input" placeholder="Search...">
            <button type="button" id="search_button" style="height: 23px; 
   width:63px;">Search</button>
          </li>
        </ul>
      </div>
      <div class="panel-group" id="accordion">

Мы будем очень признательны за любые предложения по решению этой проблемы.

Ввод поиска не найден JavaScript

Ответы (1)