Javascript Jquery to change class onclick

Question

I want to change a class onclick  What I have at the moment    lt script gt  function changeclass      var NAME   document getElementById  myclass    NAME className  mynewclass       lt  script gt    But  ofcourse  its not working  Also  it should revert to previuos state onclick again   My html    lt div id  showhide  class  meta-info  onclick  changeclass     gt    So  whenever I press on  showhide myclass should change to mynewclass  Thanks for help in advance

User · Answer

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().

User · Answer

Another example is       myClass   on  click   function         var  this     this       if   this hasClass  show          this removeClass  show         else        this addClass  show

User · Answer

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

User · Answer

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

User · Answer

lt div class  liveChatContainer online  gt           lt div class  actions  id  change  gt            lt span class  item title  gt Need help  lt  span gt                 lt a href   test  onclick  demo    gt  lt i class  fa fa-smile-o  gt  lt  i gt Chat lt  a gt                 lt a href   test  gt  lt i class  fa fa-smile-o  gt  lt  i gt Call lt  a gt                 lt a href   test  gt  lt i class  fa fa-smile-o  gt  lt  i gt Email lt  a gt           lt  div gt                 lt a href     class  liveChatLabel  gt Contact lt  a gt        lt  div gt                lt style gt                  actions one                 background-color  red                                          lt  style gt                 lt script gt            function demo          document getElementById  change   setAttribute  class   actions one                  lt  script gt

User · Answer

Your getElementById is looking for an element with id  myclass   but in your html the id of the DIV is showhide  Change to    lt script gt  function changeclass      var NAME   document getElementById  showhide    NAME className  mynewclass       lt  script gt    Unless you are trying to target a different element with the id  myclass   then you need to make sure such an element exists

User · Answer

Just using this will add  mynewclass  to the element with the id myElement and revert it on the next call    lt div id  showhide  class  meta-info  onclick  changeclass this    gt   function changeclass element          element  toggleClass  mynewclass        Or for a slighly more jQuery way  you would run this after the DOM is loaded    lt div id  showhide  class  meta-info  gt       showhide   click function           this  toggleClass  mynewclass          See a working example of this here  http   jsfiddle net S76WN

User · Answer

For a super succinct with jQuery approach try    lt div onclick    this  toggleClass  newclass    gt click me lt  div gt    Or pure JS    lt div onclick  this classList toggle  newclass     gt click me lt  div gt

[javascript] Javascript/Jquery to change class onclick?

Examples related to javascript