nmajethiya nmajethiya - 6 months ago 6
Javascript Question

how to use JS function to change class of list dynamically

I want to change the class of list item dynamically according to user's click on it
I have menu and I want to assign active class to only that menu which is clicked by user and initially Home Menu must be active

here is my code

<section id="menu-area">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- LOGO -->
<!-- TEXT BASED LOGO
<a class="navbar-brand" href="index.html">Inventive</a> -->
<!-- IMG BASED LOGO -->
<a class="navbar-brand" href="index.html"><img class="img-responsive" src="assets/images/logo.png" alt="logo" width="200"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
@yield('logo')
<li id="home"><a href="{{ URL::route('index') }}" onclick="activeclass(id)">Home</a></li>
<li id="aboutus"><a href="{{ URL::route('aboutus') }}" onclick="activeclass(id)">About Us</a></li>
<li id="products"><a href="{{ URL::route('products') }}" onclick="activeclass(id)">Products</a></li>
<li id="gallery"><a href="{{ URL::route('gallery') }}" onclick="activeclass(id)" >Gallery</a></li>
<li id="contactus"><a href="{{ URL::route('contactus') }}" onclick="activeclass(id)">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>




Here is JS Function

<script type="text/javascript">

public function activeclass(id)
{
document.getElementById(id).className += "active";
}


</script>


in CSS file active class with li will be used to highlight the selected page menu

Answer

Although there are better ways to achieve the thing you want (like the @Jitendra Tiwari's answer or my example below), I want to point you to the problem in your code.

The problem is that you pass to the function activeclass an unknown parameter: id.

When you debug your code you can see that the id param is empty:

enter image description here

You need to pass a string parameter with the relevant id:

function activeclass(id) {
  document.getElementById(id).className += "active";
}
.active {
  background:red;
}
<nav class="navbar navbar-default" role="navigation">  
  <div class="container">
    <div class="navbar-header">
      <!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!-- LOGO -->              
      <!-- TEXT BASED LOGO 
<a class="navbar-brand" href="index.html">Inventive</a>  -->            
      <!-- IMG BASED LOGO  -->
      <a class="navbar-brand" href="index.html"><img class="img-responsive" src="assets/images/logo.png" alt="logo" width="200"></a> 
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
        @yield('logo')
        <li id="home"><a href="#" onclick="activeclass('home')">Home</a></li>
        <li id="aboutus"><a href="#" onclick="activeclass('aboutus')">About Us</a></li>
        <li id="products"><a href="#" onclick="activeclass('products')">Products</a></li>
        <li id="gallery"><a href="#" onclick="activeclass('gallery')" >Gallery</a></li>           
        <li id="contactus"><a href="#" onclick="activeclass('contactus')">Contact</a></li>
      </ul>                     
    </div><!--/.nav-collapse -->
  </div>     
</nav>

http://jsbin.com/dadoqop/edit?html,css,js

Also, remove the public keyword from your code. It's not in javascript

A working example without jQuery:

[].forEach.call(document.querySelectorAll('#top-menu a'), function(elm) {
  elm.addEventListener('click', function() {
    var active = document.querySelector('.active');
    if (active) {
      document.querySelector('.active').classList.remove('active');
    }
    elm.parentNode.classList.add('active');  
  });
});
.active {
  background:red;  
}
<nav class="navbar navbar-default" role="navigation">  
  <div class="container">
    <div class="navbar-header">
      <!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!-- LOGO -->              
      <!-- TEXT BASED LOGO 
<a class="navbar-brand" href="index.html">Inventive</a>  -->            
      <!-- IMG BASED LOGO  -->
      <a class="navbar-brand" href="index.html"><img class="img-responsive" src="assets/images/logo.png" alt="logo" width="200"></a> 
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
        @yield('logo')
        <li id="home"><a href="#">Home</a></li>
        <li id="aboutus"><a href="#">About Us</a></li>
        <li id="products"><a href="#">Products</a></li>
        <li id="gallery"><a href="#">Gallery</a></li>           
        <li id="contactus"><a href="#">Contact</a></li>
      </ul>                     
    </div><!--/.nav-collapse -->
  </div>     
</nav>