JS function to hide blog posts

Question

I created a blog website with 3 main categories: investing, money and retirement. I added a class element that corresponds to each topic category. I'm trying to create JS functions that, when clicked, hide the other two categories (I'm doing with to avoid having a homepage for each category). Here is one function to show the Retirement category by hiding the Investing and Money categories:

    function showRetirement() {
        var abc = document.getElementsByClassName("Investing, Money");
        for (var abc2 = 0; abc2 < abc.length; abc2++) {
        abc[abc2].style.display = "none";
            }
        }

Needless to say it doesn't work. Brackets is saying the function "is defined but never used." It is also saying the var abc " 'document' is not defined."

This is my link to the function:

<div class="nav-link" onclick="showRetirement()">Retirement</div>

Thank you!!!

Answer 1

Welcome to SO Dan.

getElementsByClassName does not allow retrieving by multiple class names in one call. Instead, it will be easier to use the document.querySelectorAll() method, which allows using query selectors to select items from the page. A query selector to select all items with the class Investing OR Money would look like this: .Investing, .Money

As a side note, the warnings in your brackets editor can be ignored at this point, the editor doesn't realise you are calling this function from an onClick="" handler and therefore thinks the function isn't use.

Another side note, it is conventional to use the variable i in for-loops, other programmers will more easily be able to understand what the variable is used for.

An example solution, using querySelectorAll

function showRetirement() {
    var elements = document.querySelectorAll(".Investing, .Money");
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.display = "none";
    }
}

It is also probably worth showing the items with the Retirement class here too, after we hide the others:

function showRetirement() {
    var elementsToHide = document.querySelectorAll(".Investing, .Money");
    for (var i = 0; i < elementsToHide.length; i++) {
        elementsToHide[i].style.display = "none";
    }

    var elementsToShow = document.querySelectorAll(".Retirement");
    for (var i = 0; i < elementsToShow.length; i++) {
        elementsToShow[i].style.display = "block";
    }
}

Answer 2

function showRetirement(){
 var ar_el;
 ar_el = document.getElementsByClassName("Investing");
 for (var i = 0; i < ar_el.length; i++)
  ar_el[i].style.display = "none";

 ar_el = document.getElementsByClassName("Money");
 for (var i = 0; i < ar_el.length; i++)
  ar_el[i].style.display = "none";

 ar_el = document.getElementsByClassName("Retirement");
 for (var i = 0; i < ar_el.length; i++)
  ar_el[i].style.display = "block";

}