How can I get the class name with jQuery or Javascript

Question

I want to make a Javascript function where it reads the class of the selected element and adds the class active. How can I get the class of the HTML element where my function is?

I tried to make an Javascript function with document.getElementsByClassName(class), but that doesn't work.

function menuicon(){
  var className = $('div').attr('class');
  className.$(className).addClass("active");
}

<section class="menubar">
  <div class="menuicon" onclick="classAdd()">
    <span></span>
    <span></span>
    <span></span>
  </div>
</section>

<section class="home">
  <button class="hbutton" onclick="classAdd()"></button>
</section>

I want that the Javascript function reads out the class of the HTML element where the function is placed in.

Either What do querySelectorAll and getElementsBy* methods return? or jQuery Learning Center — Andreas
– Andreas, Commented Jan 21, 2019 at 17:19

Barmar · Accepted Answer · 2019-01-21 17:18:19Z

1

You need to pass the element to the function:

onclick="classAdd(this)"

Then in the function, you just use .addClass, you don't need to use className.

function classAdd(element) {
    $(element).addClass("active");
}

answered Jan 21, 2019 at 17:18

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dellirium Over a year ago

or he could just use onclick="classAdd()" and reference this in the function, or would this be wrong due to some reason?

Barmar Over a year ago

That won't work, this isn't passed when you call a function like that.

fdomn-m Over a year ago

Alternative is to embrace jquery and set the event in the javascript instead of using onclick= - then you get this.

Dellirium Over a year ago

can set the event even without jQuery sicne it is embracing good coding practices, I am baffeled that after three years of .js I never figgured out that .onclick is not equal to writting onclick inside HTML in this way...

Barmar Over a year ago

@despamigros Use toggleClass instead of addClass.

Josh · Accepted Answer · 2019-01-21 17:30:43Z

0

This code snippet only include 'active' in the classList of the div

var classAdd = function() {
                  var menuIcon = document.querySelector('div.menuicon');
                      menuIcon.addEventListener('click',() => {
                                                    menuIcon.classList.add('active');
                                                 });
                          }

answered Jan 21, 2019 at 17:30

Josh

114 bronze badges

1 Comment

Barmar Over a year ago

This will require two clicks. The first click adds the event listener, the second click adds the class.

Bijay Yadav · Accepted Answer · 2019-01-21 18:13:29Z

0

If encase you want to stick with the div and the menuicon class. Below code will work fine for you.

function classAdd() {
    $("div.menuicon").attr("class", "menuicon active");
}

answered Jan 21, 2019 at 18:13

Bijay Yadav

9781 gold badge9 silver badges23 bronze badges

Collectives™ on Stack Overflow

How can I get the class name with jQuery or Javascript

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related