changing the text color according to the active tab

following my question posted here Unable to add a background colour to the button in navigation

I have managed to fix my issues and move on with my work , however an issue i came across was to change the font color of the navigation bar elements according to the active tab.The "currently active" tab is given the correct color through css so im hoping the css part is correct thus leaving the JavaScript part an issue. I am still very new to this so any form of help is greatly appreciated

This is my html part of the navigation bar div id="navbar" >

            <ul>
                <li> <a class="topnavbar active" href="" id="home"title="Home">HOME </a> </li>
                <li> <a class="topnavbar"        href="" id="movies" title="Movies">MOVIES </a> </li>
                <li> <a class="topnavbar"        href="" id="theaters" title="Theaters">THEATERS </a> </li>
                <li> <a class="topnavbar"        href="" id="buytickets" title="Buy Tickets Online">BUY TICKETS ONLINE </a> </li>
                <li style="float:right"><a class="btn btn-scope1 navbar-btn" id="btn1" href="">TEST YOUR KNOWLEDGE </a> </li>

            </ul>   

            </div>

this is my css part for the active tab

    .active {
text-decoration: none;
color: #4da6ff;
outline: none;  }

this is what i have on my JavaScript.

var header = document.getElementById("navbar");
var btns = header.getElementsByClassName("topnavbar");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}

Please bare with me if iv made a silly mistake since im fairly new to this any explanation on where i have gone wrong is greatly appreciated . Thank you