How to pass this element to JavaScript onclick function and add a class to that clicked element?

Sometimes, we want to pass this element to JavaScript onclick function and add a class to that clicked element.

In this article, we’ll look at how to pass this element to JavaScript onclick function and add a class to that clicked element.

How to pass this element to JavaScript onclick function and add a class to that clicked element?

To pass this element to JavaScript onclick function and add a class to that clicked element, we can set the onclick attribute to a function that’s called with this.

For instance, we write

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

to set the onclick attribute to the a elements to call onClick with this.

Then we define the onClick function by writing

function onClick(element) {
  element.removeClass("active");
  element.addClass("active");
}

in our JavaScript code.

We call element.removeClass to remove the 'active' class and we call addClass to add the 'active' class.

Conclusion

To pass this element to JavaScript onclick function and add a class to that clicked element, we can set the onclick attribute to a function that’s called with this.