Javascript / jQuery to change onclick class?

Question

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

<script> function changeclass() { var NAME = document.getElementById("myclass") NAME.className="mynewclass" } </script> 

But of course it doesn’t work. In addition, he must return to the previuos onclick state again.

My html:

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

So, whenever I click on #showhide, myclass should change to mynewclass. Thank you for your help!

Answer 1

With jquery you can do it. for example, it will simply switch classes.

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

If you want to switch classes back and forth for each click, you can use toggleClass, for example:

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

Answer 2

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

 <script> function changeclass() { var NAME = document.getElementById("showhide") NAME.className="mynewclass" } </script> 

If you are not trying to target another item with the id "myclass", you need to make sure that the item exists.

Answer 3

Just using this, we add "mynewclass" to the element with the identifier myElement and return it the next time we call it.

 <div id="showhide" class="meta-info" onclick="changeclass(this);"> function changeclass(element) { $(element).toggleClass('mynewclass'); } 

Or for a faster jQuery method (you would run this after loading the DOM)

 <div id="showhide" class="meta-info"> $('#showhide').click(function() { $(this).toggleClass('mynewclass'); }); 

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

Answer 4

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

Answer 5

  <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> 

Answer 6

Another example:

 $(".myClass").on("click", function () { var $this = $(this); if ($this.hasClass("show") { $this.removeClass("show"); } else { $this.addClass("show"); } }); 

Answer 7

I think you mean that you want the onclick event to change the class.

Here is the answer if someone visits this question and literally wants to assign a class, and it will be enabled using JQUERY.

This is somewhat inconsistent, but if you want to change the onclick event by changing the class, you need to declare the onclick event to apply to the elements of the 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> 

Ready for document

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

A little tweak to your javascript

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

If you cannot reliably identify the parent, 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 elements, it might be easier for you to use .hide () and .show ().

Answer 8

For a super concise approach, try:

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