Hola, esta es la primera vez que hago una pregunta aquí, así que perdonen cualquier error de formato que cometa.
Estoy tratando de realizar una búsqueda en tiempo real en una página web que usa HTML, JavaScript, CSS y PHP. El problema con el que me encuentro es que mi JavaScript parece no poder encontrar mi ID de entrada de búsqueda, por lo que aparece este error cuando cargo la página web:
Uncaught TypeError: Cannot read property 'addEventListener' of null at search.js:3Aquí hay un fragmento de js y 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">Cualquier sugerencia sobre una solución a este problema será muy apreciada, gracias.
Su JS probablemente esté disparando demasiado rápido. En el fragmento, no existe tal problema con la selección del elemento. Envuelva su código JS dentro de un evento DOMContentLoaded eventListener. Se asegurará de que su JS se ejecute solo después de que todos los elementos se hayan cargado en el DOM.
document.addEventListener('DOMContentLoaded', () => { //All your JS code here })