Estoy trabajando en un pequeño proyecto y encontré el siguiente error de JavaScript:
script.js:5 Uncaught TypeError: Cannot set properties of null (setting 'onkeyup') at script.js:5:18Aquí está el código HTML y JavaScript que utilicé:
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>Entiendo qué está causando este problema, pero no estoy seguro de cómo solucionarlo. Y todo funciona bien cuando se abre en el navegador, excepto que muestra este error.
Parece que el DOM de entrada no estaba listo
probar
window.addEventListener('DOMContentLoaded', (event) => { // your code // DOM ready });