Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Pagination & Content Filter

Neil Bircumshaw
seal-mask
.a{fill-rule:evenodd;}techdegree
Neil Bircumshaw
Full Stack JavaScript Techdegree Student 14,597 Points
Posted by Neil Bircumshaw
.a{fill-rule:evenodd;}techdegree
Neil Bircumshaw
Full Stack JavaScript Techdegree Student 14,597 Points

javascript search bar through li items

searchButton.addEventListener("click", function(){
    for (var i = 0; i < li.length; i++){
        if (input.value.toUpperCase == li[i].innerHTML){
            li[i].style.display = "block"
        }

        else {li[i].style.display = "none"
        }
}
})

Wanted this piece of code to loop through all the list items and show the ones that are the same as what the person types into the input box and then hide the rest if the text name of the list item is different. Any idea why this code doesn't run? Instead when something is typed into the search bar and the button is clicked it simply shows no list items at all. I imagine my if statement is incorrect.

This is the HTML list items 

<div class="page">
      <div class="page-header cf">
        <h2>Students</h2>


      </div>
      <ul class="student-list">
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/67.jpg">
                <h3>iboya vat</h3>
                <span class="email">iboya.vat@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 07/15/15</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/75.jpg">
                <h3>aapo niskanen</h3>
                <span class="email">aapo.niskanen@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 06/15/12</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/34.jpg">
                <h3>phillip cox</h3>
                <span class="email">phillip.cox@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 09/11/14</span>
           </div>
        </li>

the list goes on...

Ford Heacock
Ford Heacock
18,068 Points
Ford Heacock
Ford Heacock
18,068 Points

Hey Neil! I tried rebuilding what you were looking to do. You need to make sure that you also .toUpperCase the list items or else they won't correctly compare if there are any caps differences. Also consider using the includes() method instead of doing a hard compare if you want more flexible results (just a thought). I did a slight variation from yours but let me know if this helps! 

const input = document.querySelector('input');
var list = document.querySelectorAll('.child');

input.addEventListener('keyup', function(){
  var text = this.value;

  for(var i = 0; i < list.length; i++){
    if (!list[i].innerText.toUpperCase().includes(text.toUpperCase())) {
        list[i].style.display = 'none';
    } else {
        list[i].style.display = 'block';
    }
  }
});

working fiddle: https://jsfiddle.net/fordwh44/k8gz1rok/

1 Answer

Neil Bircumshaw
seal-mask
.a{fill-rule:evenodd;}techdegree
Neil Bircumshaw
Full Stack JavaScript Techdegree Student 14,597 Points
Neil Bircumshaw
.a{fill-rule:evenodd;}techdegree
Neil Bircumshaw
Full Stack JavaScript Techdegree Student 14,597 Points

Thank you so much Ford! I've tweaked your code to fit into mine in order for the event to execute on the button rather then when it keys up from the search bar itself. The includes() method is very handy in this task therefore thank you very much for sharing it with me :)