DEV Community


Filter Through A list of Images in Javascript

Yahaya Kehinde
Medical Doctor || Software Engineer
Updated on ・1 min read

In this post, we are going to discuss how to filter through a list of images using the keyup event listener in javascript.

Lets assume we have a root folder which contains our "index.html" file. We have an unordered list containing a list of images wrapped in a <p> tag to name each image. We are going to filter through these images using their individual names within the <p> tag. Consider the following code:

First we add our search box:

Alt Text
Notice the onkeyup event listener and the filterImages() function we defined.

Then our list item:

Alt Text

Next our script tag for our javascript:

Lets first get our DOM elements :
Alt Text

Next lets finally create our function using all the DOM elements earlier defined. Then we loop through the list <li> and pick the <p> containing the names of each image and get their innerText.

Alt Text

Discussion (0)

Forem Open with the Forem app