I have a simple application designed to filter a list by displaying items that match the criteria and hiding the rest.
There is a function triggered by an 'input' event on the <input> element. This function modifies the "display" attribute for each <li> element, setting it to either block or none based on the input value. However, I am not seeing any changes reflected on the page.
Below is the code snippet:
function filterInput(e) {
// Value from the <input> element
let keyValue = e.target.value;
// Getting all items from the list
let listOfTasks = document.querySelectorAll('.list-group-item');
listOfTasks.forEach(function (task) {
const item = task.firstChild.textContent;
if (~item.indexOf(keyValue)) {
task.style.display = 'block';
} else {
task.style.display = 'none';
}
});
}
Here is a screenshot showing the elements before the event:
https://i.sstatic.net/PhkhY.png
And here is a screenshot showing the elements after the event:
https://i.sstatic.net/8aW2x.png
Unfortunately, despite executing the function, nothing seems to change on the actual page: