Javascript/Jquery to change class onclick?

Question

I want to change a class onclick. What I have at the moment:

<script>
function changeclass() {

var NAME = document.getElementById("myclass")

NAME.className="mynewclass"

} 
</script>

But, ofcourse, its not working. Also, it should revert to previuos state onclick again.

My html:

<div id="showhide" class="meta-info" onclick="changeclass();">

So, whenever I press on #showhide myclass should change to mynewclass. Thanks for help in advance!

You use getElementById. This function takes the id an element, not its class. — Felix Kling
– Felix Kling, Commented Aug 10, 2011 at 16:34
getElementById namely "myclass" but anyways, in the HTML you use he ID showhide. Why? — Roko C. Buljan
– Roko C. Buljan, Commented Apr 4, 2022 at 0:43

SunnyRed · Accepted Answer · 2011-08-10 17:28:51Z

36

With jquery you could do to sth. like this, which will simply switch classes.

$('.showhide').click(function() {
    $(this).removeClass('myclass');
    $(this).addClass('showhidenew');
});

If you want to switch classes back and forth on each click, you can use toggleClass, like so:

$('.showhide').click(function() {
    $(this).toggleClass('myclass');
    $(this).toggleClass('showhidenew');
});

edited Aug 10, 2011 at 17:28

answered Aug 10, 2011 at 16:36

SunnyRed

3,5454 gold badges38 silver badges59 bronze badges

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

7 Comments

funguy Over a year ago

How this script should look if my showhide is not an id, its <div class = "showhide"> and my new class would be showhidenew ?

SunnyRed Over a year ago

This doesn't make a lot of difference. Changing from id(#) to class(.)changes your selector from #showhide to .showhide. The renaming of the new Class can simply be copied to the addClass / toggleClass, if you use the latter. See my edit.

funguy Over a year ago

Do I have to add something like onclick()? Or it should work like this whenever I press on clas .showhide?

funguy Over a year ago

I know that your variant is correct, but in my case it just doesnt work somehow.

SunnyRed Over a year ago

Can you post your code somewhere (e.g. on jsfiddle.net) or post a link to your actual page? Then I can help you more precisely.

|

Griffin · Accepted Answer · 2011-08-10 16:33:15Z

7

Your getElementById is looking for an element with id "myclass", but in your html the id of the DIV is showhide. Change to:

<script>
function changeclass() {

var NAME = document.getElementById("showhide")

NAME.className="mynewclass"

} 
</script>

Unless you are trying to target a different element with the id "myclass", then you need to make sure such an element exists.

answered Aug 10, 2011 at 16:33

Griffin

14.8k4 gold badges32 silver badges47 bronze badges

Comments

Felix Eve · Accepted Answer · 2019-11-01 22:34:42Z

6

For a super succinct with jQuery approach try:

<div onclick="$(this).toggleClass('newclass')">click me</div>

Or pure JS:

<div onclick="this.classList.toggle('newclass');">click me</div>

edited Nov 1, 2019 at 22:34

answered Aug 1, 2017 at 4:30

Felix Eve

3,8643 gold badges43 silver badges50 bronze badges

8 Comments

TheArchitecta Over a year ago

I liked the idea of this approach INLINE. But this specific syntax does not work, how can you have double quotes like that $(this) errors. etc etc Can you provide an edit here with a working example

Felix Eve Over a year ago

Good spot, fixed using single quotes

TheArchitecta Over a year ago

Yes, but it still does not work, I am no JS expert, still learning, but this simple example as much as it seems like a great idea it does not work for me. I get "Uncaught ReferenceError: $ is not defined at HTMLButtonElement.onclick" Please see for yourself... you can inspect for the console error. w3schools.com/code/tryit.asp?filename=G9JA8STH3SSP

Felix Eve Over a year ago

If $ is not defined sounds like you've not added jQuery to the page.

Felix Eve Over a year ago

I've added an alternate solution that doesn't require jQuery

|

CaffGeek · Accepted Answer · 2011-08-10 16:34:57Z

1

Just using this will add "mynewclass" to the element with the id myElement and revert it on the next call.

<div id="showhide" class="meta-info" onclick="changeclass(this);">

function changeclass(element) {
    $(element).toggleClass('mynewclass');
}

Or for a slighly more jQuery way (you would run this after the DOM is loaded)

<div id="showhide" class="meta-info">

$('#showhide').click(function() {
    $(this).toggleClass('mynewclass');
});

See a working example of this here: http://jsfiddle.net/S76WN/

answered Aug 10, 2011 at 16:34

CaffGeek

22.2k18 gold badges106 silver badges186 bronze badges

2 Comments

funguy Over a year ago

Chad, how this script should look if my showhide is not an id, its <div class = "showhide"> and my new class would be showhidenew ?

CaffGeek Over a year ago

You would change the jQuery selector $('#showhide') to something correct like $('.showhide') and the class in toggleClass to showhidenew.

Vikas Kandari · Accepted Answer · 2015-10-23 11:19:28Z

      <div class="liveChatContainer online">
        <div class="actions" id="change">
         <span class="item title">Need help?</span>
              <a href="/test" onclick="demo()"><i class="fa fa-smile-o"></i>Chat</a>
              <a href="/test"><i class="fa fa-smile-o"></i>Call</a>
              <a href="/test"><i class="fa fa-smile-o"></i>Email</a>
        </div>
              <a href="#" class="liveChatLabel">Contact</a>
     </div>
             <style>
               .actions_one{
               background-color: red;
                      } 
              </style>



           <script>
          function demo(){
      document.getElementById("change").setAttribute("class","actions_one");}
            </script>

ayyp · Accepted Answer · 2011-08-10 18:18:45Z

0

I would think this: http://jsfiddle.net/Skooljester/S3y5p/1/ should do it. If I don't have the class names 100% correct you can just change them to whatever you need them to be.

edited Aug 10, 2011 at 18:18

answered Aug 10, 2011 at 16:38

ayyp

6,5984 gold badges35 silver badges47 bronze badges

1 Comment

funguy Over a year ago

How this script should look if my showhide is not an id, its <div class = "showhide"> and my new class would be showhidenew ?

maverick · Accepted Answer · 2015-10-23 11:25:18Z

0

Another example is:

$(".myClass").on("click", function () {
   var $this = $(this);

   if ($this.hasClass("show") {
    $this.removeClass("show");
   } else {
    $this.addClass("show");
   }
});

answered Oct 23, 2015 at 11:25

maverick

7902 gold badges13 silver badges30 bronze badges

Comments

Chris McCowan · Accepted Answer · 2016-05-01 07:27:20Z

I think you mean that you want want an onclick event that changes a class.

Here is the answer if someone visits this question and is literally looking to assign a class and it's onclick with JQUERY.

It is somewhat counter-intuitive, but if you want to change the onclick event by changing the class you need to declare the onclick event to apply to elements of a parent object.

HTML

<div id="containerid">
     Text <a class="myClass" href="#" />info</a>
     Other Text <div class="myClass">other info</div>
</div>
<div id="showhide" class="meta-info">hide info</div>

Document Ready

$(function() {
     $("#containerid").on("click",".myclass",function(e){ /*do stuff*/ }
     $("#containerid").on("click",".mynewclass",function(e){ /*do different stuff*/ }
     $("#showhide").click(function() {changeclass()}
});

Slight Tweak to Your Javascript

<script>
function changeclass() {
        $(".myClass,.myNewClass").toggleClass('myNewClass').toggleClass('myClass');
} 
</script>

If you can't reliably identify a parent object you can do something like this.

$(function() {
     $(document).on("click",".myclass",function(e){}
     $(document).on("click",".mynewclass",function(e){}
});

If you just want to hide the items you might find it simpler to use .hide() and .show().

Collectives™ on Stack Overflow

Javascript/Jquery to change class onclick?

8 Answers 8

7 Comments

Comments

8 Comments

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

7 Comments

Comments

8 Comments

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related