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 Solution: Trigger Page Changes

Piotr Manczak
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Piotr Manczak
Front End Web Development Techdegree Graduate 29,260 Points

Wrong type of parameter

My solution is slightly different.

paginationList.addEventListener("click", (e) => {
  // 8. Create a variable to store the button which currently has the `active` class
    const active = paginationList.querySelector(".active");

    // getting all the buttons so one knows the event target is a BUTTON
    const buttons = paginationList.querySelectorAll("button");

    // looping through all the buttons to check if e.target was one of them (the user clicked a button)
    for(let i = 0; i < buttons.length; i++){
        if(e.target == buttons[i]){       // If true...
                        // Remove the `active` class from the currently active button
            active.className = "";
                        //  Add the `active` class to the button just clicked
            e.target.className = "active";
                         //  Call showPage() passing it `authors` and the content of the button just clicked.
            showPage(authors, e.target.textContent);
        }
    }
});

That is the first iteration so in the future it my change. However what I don't get is the showPage() function. It has two arguments: an array and an integer. The second argument should be an integer, but Travis inserted e.target.innerHTML. Isn't it a string? I used e.target.textContent, and that is a string as well, so why is the showPage function working?

3 Answers

Steven Parker
Steven Parker
230,970 Points

You're right, these are strings, but the buttons contain only digits. This code is relying on a feature of JavaScript called type coercion, where the type is automatically converted in certain situations (like when math is done).

But one needs to be careful, as conversion can go either way. For example: "3" * 5 is the number 15, but "3" + 5 is the string "35" as the plus sign is taken as a string concatenation operator.

I'm surprised this wasn't pointed out in the video, but then this is just a practice and perhaps it is explained in the associated course or a prerequisite.

As to your alternate method, the loop is a bit inefficient since the button can be found directly from the event object as shown in the video example. Also, the loop might not always work if the element clicked was a child of the button instead of the actual button, but the use of the closest method as shown in the example will account for that.

Piotr Manczak
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Piotr Manczak
Front End Web Development Techdegree Graduate 29,260 Points

BTW what is the difference between el.className = "className" and el.classList.add("className")? Which is better to use to change a class of an element? If add("className") method exist then does it imply existence of remove("className")?

Steven Parker
Steven Parker
230,970 Points

I'm an engineer — I make things happen. Classifying and naming things is probably better left to theorists. :see_no_evil:

An assignment like el.className = "className" sets the new class name but removes any that were already there. On the other hand, calling el.classList.add("className") will leave any there alone and add the new one to them. And yes, there is indeed a classList.remove method. There are also classList.replace and classList.toggle methods.