Tengo una barra de búsqueda en la parte superior de mi página donde quiero que el usuario busque una consulta específica y luego la página ocultará todas las publicaciones de blog que no contengan esa consulta. Sin embargo, tengo un problema en el que tengo un eventListener escuchando la entrada dentro de mi barra de búsqueda, pero cuando consuelo. Cierra la sesión de un valor en una de mis funciones de devolución de llamada en el eventListener, se dispara MUCHO. Creo que este es un problema que está afectando una parte crucial de mi sitio web, así que espero solucionarlo pronto.
Aquí está mi código de inicialización para el javascript del lado del cliente:
function init() { makeCardRequest(); let input = qs('#search-term'); input.addEventListener('input', updateSearchButton); let home = qs('#home-btn'); home.addEventListener('click', goHome); }Aquí está la cadena de funciones de devolución de llamada para la entrada:
function updateSearchButton() { let button = qs('#search-btn'); if (this.value.trim() !== '') { button.disabled = false; button.addEventListener('click', () => { search(this.value); }); } else { button.disabled = true; } } async function search(query) { qs('#search-btn').disabled = true; let cards = qsa('article'); for (let i = 0; i < cards.length; i++) { cards[i].classList.add('hidden'); } console.log(cards); let home = qs('#home'); home.classList.remove('hidden'); fetch('yipper/yips?search=' + query) .then(statusCheck) .then(res => res.json()) .then(processData) .catch(console.error); }Donde noto el problema es que cuando cierro la sesión de las tarjetas en mi función de búsqueda, se cierra la sesión en la consola para cada carácter que pongo en la barra de búsqueda. Por ejemplo, si busco 'Hola', cerrará la sesión de las tarjetas 5 veces.