I'm working on a little project, and I came across the following JavaScript error:
script.js:5 Uncaught TypeError: Cannot set properties of null (setting 'onkeyup')
at script.js:5:18
Here is the HTML & JavaScript code I used:
window.addEventListener("load", () => {
var filter = document.getElementById("the-filter"),
list = document.querySelectorAll("#the-list li");
filter.onkeyup = () => {
let search = filter.value.toLowerCase();
for (let i of list) {
let item = i.innerHTML.toLowerCase();
if (item.indexOf(search) == -1) { i.classList.add("hide"); }
else { i.classList.remove("hide"); }
}
};
});#the-list {
list-style: none;
margin: 0;
padding: 0;
}
#the-list a {
text-decoration: none;
}
#the-list li {
padding: 10px;
border-bottom: 2px solid #ddd;
}
#the-list li:hover {
background: #ddd;
cursor: pointer;
}
#the-list li.hide {
display: none;
}<input type="text" id="the-filter" placeholder="Search The Marketplace..."/>
<ul id="the-list">
<a href="a_link.htm"><li>Item</li></a>
<a href="a_link.htm"><li>Item1</li></a>
<a href="a_link.htm"><li>Item2</li></a>
<a href="a_link.htm"><li>Item3</li></a>
</ul>I understand what is causing this issue, but I'm not sure how to fix it.. And it all works just fine when opened in the browser, except that it's displaying this error.
Looks like the input DOM was not ready
try
window.addEventListener('DOMContentLoaded', (event) => {
// your code
// DOM ready
});