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

Pagination & Content Filter - just starting out!

Okay so, I thought this wouldn't be too bad, but I'm already struggling at the first hurdle. I'm not great at this coding business and just need a little bit more help with it I think (total noob).

So, all I've tried to do to begin with is literally hide all the List Items in an Unordered List and only show the first 10, I'm already having problems with this (as I say I'm not very good haha) This is what I tried to start with, I'm probably very off!

This is the HTML mark up (a snip it of it):

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Students</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/design.css"> </head> <body> <div class="page"> <div class="page-header cf"> <h2>Students</h2> <-- dynamically insert search form here (optional) -->

  </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>

This just carries on for another 50 so list items, then this is my JS.

var ul = document.getElementById('student-list'); var li = ul.children;

li.addEventListener("load", function(){ for (var i = 0; i < li.length; i++){ if (li[i] > li[10]){ li.style.display = "none" }

    else {li.style.display = "block"}
}

})

Only wrote a tiny bit and I'm already struggling. apologise if I look like a total noob!

Thanks guys :)

7 Answers

Steven Parker
Steven Parker
229,771 Points
Steven Parker
Steven Parker
229,771 Points

It looks like you're comparing elements when you just want the index.

  • where you have this :point_right: if (li[i] > li[10]) {
  • you probably want this :point_right: if (i > 10) {

Also, student-list is a class, but you pass it as an argument to getElementById.

And you have to subscript a collection to get a single element if you want to access its properties:

  • instead of :point_right: li.style.display = "none"
  • try this: :point_right: li[i].style.display = "none"

And finally, a collection (like li) would not have a addEventListner method. But even more importantly, the target of the load event is the window, and I don't think any element below it will receive the event.

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

Yay, I got it to work with:

window.addEventListener("load", function(){
    for (var i = 0; i < li.length; i++){
        if (i > 9){
            li[i].style.display = "none"
        }

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

})

Thanks a lot Steven :) See, before I didn't understand about the load method and that it can't be triggered by grouped items, but having it fired by the window makes sense, so thank you for that tip :)

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

Well I changed it to this:

var ul = document.querySelector('.student-list'); var li = ul.children;

li.addEventListener("load", function(){ for (var i = 0; i < li.length; i++){ if (i > 10){ li[i].style.display = "none" }

    else {li.style.display = "block"}
}

})

and that still does not hide anything. I really want to understand JavaScript but I find it's like understanding an enchantment juju language haha.

Steven Parker
Steven Parker
229,771 Points
Steven Parker
Steven Parker
229,771 Points

You overlooked some of the hints I already gave, You're still trying to attach an event listener to the entire collection of list items. And I really don't think you can listen for "load" anywhere but on the window object anyway. So you loop isn't actually running yet. Try adding something like "console.log('load function completed');" to your function to see.

Steven Parker
Steven Parker
229,771 Points
Steven Parker
Steven Parker
229,771 Points

The method addEventListner is a method of an element. But it's not a method available on a collection.

You can make make a listener work on several elements but you have to attach it to a single element that is a parent or ancestor of all the other elements. This is what they call a delegated event handler.

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

Tried to run it as just a function without an event to trigger it and called the function, that's still not working >: Will I need an eventhandler on an element for this to work?

Sorry for so many questions, this is the best way I learn.

Steven Parker
Steven Parker
229,771 Points
Steven Parker
Steven Parker
229,771 Points

It should work if you follow the suggestion I made before.

So instead of :point_right: li.addEventListener(...
try using this :point_right: window.addEventListener(...

This is getting pretty long, you might want to close out this question and start a new one.

Also, remember when sharing code to format it using the instructions in the Markdown Cheatsheet as found below the "Add an Answer" area :arrow_heading_down: