May be there is some silly mistake I made. It's been 2 days I can't figure out the error. Here is what I want to achieve: When I type something on my search box the blocks which matches with my search there display will be block and others display will be none. Here is my HTML below.
<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>
Here is the JavaScript Code. The problem is actually here. From the includes part it's not working properly.:
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';
}
})
})
You may think what is cards, please have a look:
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>
`;
I can't find a error. If you can figure it out. Please let me know. You may need to see the full code. Here is my codepen link: https://codepen.io/techsinkv1/project/editor/Zvdvrg
