How to change class in button when you click on it

javascript change class style
toggle class javascript vanilla
javascript toggle button
classlist.toggle not working
change css class on click
change class on click javascript
javascript click button by class
change button class on click angular

I have two buttons: without background and green, I need them to change when i click on them (from green to that one with dashed border-bottom)

Here is my html:

 <div class="btns">
                <button type="button" class="btn btn-success">Муж</button>
                <button type="button" class="btn btn-link btn-simple">Жен</button>
           </div>

I've written script just like this :

$('.btn').click(function() {
    var $this = $(this);
    if ($this.hasClass('btn-success')) {
        $this.removeClass().addClass('btn-simple');
    } else if ($this.hasClass('btn-simple')) {
        $this.removeClass('btn-simple').addClass('btn-success');
       }
});

but it doesn't work.

and here is what I added to css file:

.btn-simple {
    border-bottom: 1px dashed #000;
    color: #000;
}

nothing else because these are bootstrap buttons.

you should add code in document.ready method.

$(document).ready(function () {
        $('.btn').click(function () {
            var $this = $(this);
            if ($this.hasClass('btn-success')) {
                $this.removeClass().addClass('btn-simple');
            } else if ($this.hasClass('btn-simple')) {
                $this.removeClass('btn-simple').addClass('btn-success');
            }
        });
    });

Javascript/Jquery to change class onclick?, Assigning a function to a click event with jQuery: So, for example, if I want onclick to add some class to the button I can use this: <script type="text/javascript"​>  Then, you can simple toggle the class when a button is clicked. Depends if you want remove the class when the same button is clicked again, you have to use addClass or toggleClass: $(".buttonClassA").on("click", function() { $(this).toggleClass("buttonClassB"); }); Just replace toggleClass with addClass if you want make the change persistent

You need to add the class you want to remove, for example: $this.removeClass('btn-success'). In the link below I've made an example.

   $('.btn').click(function(){
       var $this = $(this);
       if (!$this.hasClass('btn-success')) {
        $('.btn').removeClass('btn-success')
        $this.addClass('btn-success');

       }
    })

https://codepen.io/jmejia1221/pen/qMwLQP

jQuery toggleClass() Method, Click the button to toggle class name! Toggle between adding a class name to the div element with id="myDIV" (in this example we use a var i = classes. To change the focus type (to change the color of red to other) you can use this: $('button').click(function { $(this).css('border', '1px solid red'); // find any other button with a specific id, and change it back to white like $('button#red').css('border', '1px solid white'); } This way, you will create a navigation menu.

You were not removing one of the btn-success class. Also, I think you should add btn-link class. Also wrap this entire piece in document.ready

$(document).ready(function () {
    $('.btn').click(function() {
        var $this = $(this);
        if ($this.hasClass('btn-success')) {
            $this.removeClass('btn-success').addClass('btn-simple');
        } else if ($this.hasClass('btn-simple')) {
            $this.removeClass('btn-simple').addClass('btn-link').addClass('btn-success');
           }
    });
});

JavaScript classList: Manipulating CSS properties of an Element, you can add class .blue to a bloc by thirst click but how change it exactly what i need. button clicked = class of another element gets toggled Change an element class JavaScript The class name is used as a selector in HTML which helps to give some value to the element attributes. The document.getElementById() method is used to return the element in the document with the “id” attribute and the “className” attribute can be used to change/append the class of the element.

Assuming you want to toggle between buttons within a shared container..

/* longer version for demonstration purposes */
$('.btn').click(function() {
  var thisParent = $(this).closest('.btns');
  $(thisParent).find('.btn-success').addClass('btn-simple')
  $(thisParent).find('.btn-success').removeClass('btn-success');
  $(this).removeClass('btn-simple');
  $(this).addClass('btn-success');
})

/* shorter version
$('.btn').click(function() {
  $(this).closest('.btns').find('.btn-success').addClass('btn-simple').removeClass('btn-success');
  $(this).removeClass('btn-simple').addClass('btn-success');
})
*/
* { outline: 0; } button { border-style: none; cursor: pointer; padding: 5px; } button::-moz-focus-inner { border: 0; }
/* ignore above */

.btn-simple {
  border-bottom: 1px dashed #000;
  color: #000;
}
.btn-success {
  background-color: hsla(96, 92%, 37%, 1);
  border-radius: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btns">
  <button type="button" class="btn btn-success">Муж</button>
  <button type="button" class="btn btn-link btn-simple">Жен</button>
</div>
<div class="btns">
  <button type="button" class="btn btn-success">Муж</button>
  <button type="button" class="btn btn-link btn-simple">Жен</button>
   <button type="button" class="btn btn-link btn-simple">три</button>
</div>

How can I change an element's class with JavaScript?, Example 1: In this code change the class of the button from “default” to id = "​myButton" >Click Here!</ button >. < p id = "myPara" >Old class name: default</ p >. Complete Bootstrap Button Reference. For a complete reference of all button classes, go to our complete Bootstrap Button Reference.

How To Toggle Between Class Names, Description: Add or remove one or more classes from each element in the set of Toggle the class 'highlight' when a paragraph is clicked. Toggle the class name(s) indicated on the buttons for each div. divs.empty().each(function( i ) {. It's a common need in web apps: you click something and the text of the thing you just clicked changes. Perhaps something simple like a "Show" button that swaps to "Hide", or "Expand Description" to "Collapse Description." This is a fairly simple thing to do, but there are various considerations to make. Let's cover a bunch of ways.

how to change class of an element by click, getElementById("Id"), this is what the following examples use but you can obtain elements in other ways. To change all classes for an element and to replace all the existing classes with <button onclick="changeClass()">My Button</button> Use this for assigning a function to a click event with jQuery:. The button inside the React component has an onClick event handler attached to it, pointing to our sayHello() function. Doing so will trigger the function every time you click the button. How do we trigger the sayHello() function? By passing in the name of the function you want to call inside the curly braces, after the event handler:

Change an element class JavaScript, First off, you're on the right track. One of the odd things with web components is this new concept of the Shadow DOM. With the Shadow DOM,  As you can see that we have successfully created and added the JButton to the JFrame. Now we want that when we click on the button, some activity should be performed. For this, first of all, we need to implement the ActionListener interface into our class so that we will be able to do some button click event. Implementing ActionListener Interface

Comments
  • Look at toggleClass