Hello this is my first time asking a question on here so please forgive any format mistakes I make.
I am trying to make a realtime search on a web page that uses HTML,JavaScript,CSS,and PHP. The problem I am running into is that my JavaScript can not seem to find my search input ID so I get this error when I load the web page:
Uncaught TypeError: Cannot read property 'addEventListener' of null at search.js:3
Here is a snippet of the js and 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">Any suggestions on a solution to this problem will be greatly appreciated thank you.
Your JS is probably firing too quickly. In the snippet, there is no such issue with picking up the element. Wrap your JS code inside a DOMContentLoaded eventListener. It will make sure that your JS is executed only after all elements have been loaded into the DOM.
document.addEventListener('DOMContentLoaded', () => {
//All your JS code here
})