Puede ser que haya algún error tonto que cometí. Han pasado 2 días y no puedo descifrar el error. Esto es lo que quiero lograr: cuando escribo algo en mi cuadro de búsqueda, los bloques que coinciden con mi búsqueda aparecerán como bloque y los demás no aparecerán. Aquí está mi HTML a continuación.

 <form class="d-flex"> <input id="searchInput" class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form>

Aquí está el código JavaScript. El problema en realidad está aquí. Desde la parte incluye no funciona correctamente. :

 const search = document.getElementById('searchInput'); search.addEventListener('input', function(){ const inputValue = search.value.toLowerCase(); const noteCard = document.getElementsByClassName('cards'); Array.from(noteCard).forEach(function(element){ const cardTxt = element.getElementsByTagName('p')[0].innerText; console.log(typeof cardTxt) if(cardTxt.includes(inputValue)){ console.log("yes included"); element.style.display = 'block'; } else{ console.log('not included') element.style.display = 'none'; } }) })

Puede pensar qué son las tarjetas, eche un vistazo:

 let html= ""; noteArray.forEach(function(element, index){ html +=` <div class="card my-2 mx-2 cards" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title">Note ${index + 1}</h5> <p class="card-text">${element}</p> <button id=${index} onclick="deleteNote(this.id)" class="btn btn-primary">Delete Note</button> </div></div> `;

No puedo encontrar un error. Si puedes averiguarlo. Por favor hagamelo saber. Es posible que necesite ver el código completo. Aquí está mi enlace de codepen: https://codepen.io/techsinkv1/project/editor/Zvdvrg