How can I change the background color of a current page's navigation button/link using JavaScript?

Question

I want to write a JavaScript script ( not JQuery, if at all possible ) that changes the background color of a navigation button when its page is active. In other words, when I click on the "About" link and load the page, I want the "About" button to have a different background color so the user can see which page s/he is on.

Here is my HTML for the navigation links:

   <nav>
    <ul class="navbar">
      <li class="navbutton"><a href="../pages/about.php">About</a></li>
      <li class="navbutton"><a href="../index.php">Local services</a></li>
      <li class="navbutton"><a href="../pages/intercity.php">Intercity Services</a></li>
      <li class="navbutton"><a href="../pages/transportcircle.php">Transport Circle Overview</a></li>
      <li class="navbutton"><a href="../pages/feedback.php">Feedback</a></li>
    </ul>
  </nav>

Here is the CSS rule I want to apply when the page is active:

.navbutton-active {
    background-color: rgb(24, 99, 6);

So far I've come up with this script although it isn't doing much except throw up an error:

document.getElementsByClassName('navbutton').addEventListener("DOMContentLoaded", btnActive());

function btnActive() {
  document.getElementsByClassName('navbutton').classList.add('navbutton-active');
};

This is the error I get in the console:

TypeError: document.getElementsByClassName(...).classList is undefined

The behavior I'm aiming for is the following:

1. The page loads and the corresponding navigation button background changes to the color I've specified in the .navbutton-active CSS declaration.
2. When the user clicks on another navigation button, the color of the active page's navigation button changes to this color and the other navigation button colors remain their default.

This is probably simple but I can't figure it out.

Answer 1

I think the first step would be to find out which link is the one with an href property that matches the current URL.

// Obtain a collection of all links

var buttons = document.querySelectorAll('.navbutton');
var activeButton, button, link, i;

// Iterate through each link to find if its href matches the URL

for (i = 0; (button = buttons[i]); i++) {
    link = button.firstElementChild;

    // a console.log(link.href, window.location.href)
    // might be useful here to ensure the comparisons will work

    if (link.href === window.location.href) {
        activeButton = button;
        break;
    }
}

// If a matching link was found, add the active class

if (activeButton) { 
     activeButton.classList.add('navbutton-active');
}

This URL comparison step isn't foolproof, and might need improvement. Really this should be done server side if you can.

Also the error in your original example is caused because getElementsByClassName() returns an array-like collection, which you would need to iterate through before interfacing with the classList property on the individual elements (similar to querySelectorAll() in my solution, but this is the newer API).

Answer 2

function btnActive() 
  {document.getElementById("navbutton").className = "navbutton-active ";}

also check if btnActive() is actually called by using alert("testing control"); in above function