Tengo que iniciar la búsqueda cuando se hace clic en el botón de búsqueda. Así que he agregado un evento de clic en el botón de búsqueda. Cuando hago clic en el botón startSearch se llama a la función. Y esa función agrega un evento en el elemento de entrada. Ahora digamos que he escrito TEXTO en el formulario y he hecho clic en el botón de búsqueda, no pasa nada. Pero si luego escribo algo más, la búsqueda se activa. ¿Cómo hacer esto correctamente?
document.querySelector('.searchBtn').addEventListener('click', startSearch); //button const inputSearch = document.querySelector('.inputSearch'); function startSearch(){ inputSearch.addEventListener('keyup', searchFunction); }Deberá configurar los detectores de eventos tan pronto como se cargue el documento HTML (consulte el evento DOMContentLoaded ). Está registrando el controlador de eventos una vez que se hace clic en el botón de búsqueda, pero debe iniciar la búsqueda cuando se hace clic en él, por lo que debe configurar el controlador de eventos antes de eso. Luego active la función de búsqueda en el controlador de eventos. Un evento solo se puede registrar si se establece un controlador de eventos antes de que ocurra el evento.
La siguiente implementación iniciará una búsqueda una vez que cambie el valor en el campo de entrada o se haga clic en el botón de búsqueda.
function searchFunction(searchTerm) { console.log(`Searching for ${searchTerm}...`) } window.addEventListener("DOMContentLoaded", (e) => { const btn = document.querySelector(".searchBtn"); const input = document.querySelector(".inputSearch"); btn.addEventListener("click", (e) => { // get value of input field first searchFunction(input.value); }); input.addEventListener("keyup", (e) => searchFunction(e.target.value)); }); <input class="inputSearch" /> <button class="searchBtn">Search</button>