Javascript colour changer only changing colour on second click?

Question

So i have a navbar and i am trying to make it so it highlights the current tab, however my javascript isnt working, it only works on the second click, and only if you double click.

 function navColourChange(id){ var navBarLinks=document.getElementsByClassName("navLinks"); for(i=0;i<navBarLinks.length;i++){ navBarLinks[i].style.borderTop = "thick solid #ffffFF"; navBarLinks[i].style.color="#2F2933" console.log(i) } var link = navBarLinks[id] link.style.borderTop = "4px solid #01A2A6"; link.style.color="#01A2A6" }

 <div class="NavBar"> <ul> <li> <a href="index.html" id="navButton1" class="navLinks" onclick="navColourChange(0)">HOME</a> </li> <li> <a href="about.html" id="navButton3" class="navLinks" onclick="navColourChange(1)">ABOUT</a> </li> <li> <a href="Portfolio.html" id="navButton4" class="navLinks" onclick="navColourChange(2)">PORTFOLIO</a> </li> <li> <a href="Contact.html" id="navButton2" class="navLinks" onclick="navColourChange(3)">CONTACT</a> </li> </ul> </div>

Heres what it looks like

Answer 1

If what you really are looking for is a way to highligt the current page in your navbar, with JavaScript/jQuery, you can do something like this:

$(function() {
   var currentPage = window.location.pathname.split('/').pop();
   $('.NavBar ul li a[href*="'+currentPage+'"]').css({
      borderTop: "4px solid #01A2A6",
      color: "#01A2A6"
   });
});

Here we find the filename from the url and then style that a-element in the navbar which has that filename as href.