how to pass this element to javascript onclick function and add a class to that clicked element

Question

I had an html navigation code as below

function Data(string) {   //1. get some data from server according to month year etc.,   //2. unactive all the remaining li's and make the current clicked element active by adding "active" class to the element   $('.filter').removeClass('active');   $(this).addClass('active'); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row" style="padding-left:21px;">   <ul class="nav nav-tabs" style="padding-left:40px;">     <li class="active filter"><a href="#month" onclick="Data('month')">This Month</a></li>     <li class="filter"><a href="#year" onclick="Data('year')">Year</a></li>     <li class="filter"><a href="#last60" onclick="Data('last60')">60 Days</a></li>     <li class="filter"><a href="#last90" onclick="Data('last90')">90 Days</a></li>   </ul> </div>

When the user clicks on any of the tabs

• all the remaining tabs should be unactive,
• and the current element/tab should be active,

My code above is not working.

1. How to make the above code work?
2. I only want to use javascript onclick for this. Is there any way that the this(current) object is send when the user clicks on the tab?

Answer 1

Use this html to get the clicked element:

<div class="row" style="padding-left:21px;">     <ul class="nav nav-tabs" style="padding-left:40px;">         <li class="active filter"><a href="#month" onclick="Data('month', this)">This Month</a></li>         <li class="filter"><a href="#year" onclick="Data('year', this)">Year</a></li>         <li class="filter"><a href="#last60" onclick="Data('last60', this)">60 Days</a></li>         <li class="filter"><a href="#last90" onclick="Data('last90', this)">90 Days</a></li>     </ul>  </div> 

Script:

 function Data(string, el)  {      $('.filter').removeClass('active');      $(el).parent().addClass('active');  }  

Answer 2

You can use addEventListener to pass this to a JavaScript function.

HTML

<button id="button">Year</button> 

JavaScript

(function () {     var btn = document.getElementById('button');     btn.addEventListener('click', function () {         Date('#year');     }, false); })();   function Data(string)           {                 $('.filter').removeClass('active');                 $(this).parent().addClass('active') ;           }