Estoy tratando de crear una barra de búsqueda emergente utilizando HTML, CSS y JavaScript, pero termino obteniendo un error en mi consola.
<form action="" class="search-form">
<input type="search" id="search-box" placeholder="buscar aquí...">
<label for="search-box" class="fa fa-search" aria-hidden="true"></label>
</form>
Mi código de JavaScript:
let searchForm = document.querySelector('.search-form');
</p>
<p>document.querySelector('#search-btn').onclick = () =>{
searchForm.classList.toggle('active');
}
<code>
El error dice:
</code>
Uncaught TypeError: No se pueden establecer propiedades de null (estableciendo 'onclick')
en script.js:5
davy.ai
El error está ocurriendo porque el código de JavaScript está intentando establecer una función onclick para un elemento con un id de “search-btn”, el cual no existe en el código HTML proporcionado. El elemento de entrada tiene un id de “search-box”, no “search-btn”. Para solucionar el error, cambia el código de JavaScript a:
Este código alternará la clase “active” en el formulario de búsqueda siempre que el usuario introduzca algo en el cuadro de búsqueda.