I have three buttons. I need each button to change class when one button is clicked

So, if button 1 is clicked, that changes class and the other 2 buttons revert back to their old class.

If button 2 is clicked, button 2 will change class and the other 2 buttons will revert back to their original class (button 1 will revert and no longer have the class set previously)

Buttons HTML:

<button onclick="show1();" id="btn-take" class="switch-btn">Take</button>
<button onclick="show2();" id="btn-ask" class="switch-btn-middle">Ask</button>
<button onclick="show3();" id="btn-trade" class="switch-btn">Trade</button>

JavaScript:

function show1(){
    document.getElementById('btn-take').classList.add('switch-btn-active');
    document.getElementById('btn-ask').classList.add('switch-btn-middle');
    document.getElementById('btn-trade').classList.add('switch-btn');
}
function show2(){
    document.getElementById('btn-take').classList.add('switch-btn');
    document.getElementById('btn-ask').classList.add('switch-btn-middle-active');
    document.getElementById('btn-trade').classList.add('switch-btn');
}
function show3(){
    document.getElementById('btn-take').classList.add('switch-btn');
    document.getElementById('btn-ask').classList.add('switch-btn-middle');
    document.getElementById('btn-trade').classList.add('switch-btn-active');
}

I have three buttons. I need each button to change class when one button is clicked

So, if button 1 is clicked, that changes class and the other 2 buttons revert back to their old class.

If button 2 is clicked, button 2 will change class and the other 2 buttons will revert back to their original class (button 1 will revert and no longer have the class set previously)

Buttons HTML:

<button onclick="show1();" id="btn-take" class="switch-btn">Take</button>
<button onclick="show2();" id="btn-ask" class="switch-btn-middle">Ask</button>
<button onclick="show3();" id="btn-trade" class="switch-btn">Trade</button>

JavaScript:

function show1(){
    document.getElementById('btn-take').classList.add('switch-btn-active');
    document.getElementById('btn-ask').classList.add('switch-btn-middle');
    document.getElementById('btn-trade').classList.add('switch-btn');
}
function show2(){
    document.getElementById('btn-take').classList.add('switch-btn');
    document.getElementById('btn-ask').classList.add('switch-btn-middle-active');
    document.getElementById('btn-trade').classList.add('switch-btn');
}
function show3(){
    document.getElementById('btn-take').classList.add('switch-btn');
    document.getElementById('btn-ask').classList.add('switch-btn-middle');
    document.getElementById('btn-trade').classList.add('switch-btn-active');
}

• javascript
• jquery
• class

• Any help would be much appreciated. Any suggestions on improving my question, much appreciated. – James Osguthorpe Commented Jul 15, 2019 at 11:53
• You are using plane javascript. It can be more easier with jquery – anjaneyulubatta505 Commented Jul 15, 2019 at 11:55

5 Answers 5

Not much information in the question so, I'm posting a simple solution.

$(document).ready(function(){
    $('#btn-take, #btn-ask, #btn-trade').click(function(){
        $('#btn-take, #btn-ask, #btn-trade').removeClass('active');
        $(this).addClass('active');
    });
});

.active{
   background: red;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="btn-take" class="switch-btn">Take</button>
<button id="btn-ask" class="switch-btn-middle">Ask</button>
<button id="btn-trade" class="switch-btn">Trade</button>

is quite simple, can even be done in general, without specifying the classes of buttons

$(document).ready(function() {
  $('.subnav_links button').click(function() {
    $(this).addClass('active').siblings().removeClass('active');
  });
});

.subnav_links button {
  font-size: 11px;
  font-family: Verdana, sans-serif;
  color: #000;
}

.subnav_links button.active {
  font-size: 11px;
  font-family: Verdana, sans-serif;
  color: #6A8B4C;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="subnav_links">
  <button class="active">Home</button>
  <button class="">Foo</button>
  <button class="">Doo</button>
</div>

In your format, 1st call a mon function and remove clicked class than adding this class to clicked button.

after that apply CSS to the new class PS: Haven't tested.

Ex below:

<button onclick="show('1');" id="btn-take" class="switch-btn">Take</button>
<button onclick="show('2');" id="btn-ask" class="switch-btn-middle">Ask</button>
<button onclick="show('3');" id="btn-trade" class="switch-btn">Trade</button>

css:

.btn-clicked{
   background: #cfcfcf;
}

JS:

function show(action){
      $('#btn-take, #btn-ask, #btn-trade').removeClass('btn-clicked');
      if(action=="1"){
        document.getElementById('btn-take').classList.add('btn-clicked');
      }else if(action=="2"){
        document.getElementById('btn-take').classList.add('btn-clicked');
      }else{
        document.getElementById('btn-trade').classList.add('btn-clicked');
      }
    }

Single function will do:

function show(btn){
    var btns = document.querySelectorAll('button');
    btns.forEach(function(btn){
      btn.classList.remove('active');
    });
    btn.classList.add('active');
}

.active{
  color: white;
  background-color: green;
}

<button onclick="show(this);" id="btn-take" class="switch-btn">Take</button>
<button onclick="show(this);" id="btn-ask" class="switch-btn-middle">Ask</button>
<button onclick="show(this);" id="btn-trade" class="switch-btn">Trade</button>

Using jQuery:

$('[class*=switch-btn]').click(function(){
  $('[class*=switch-btn]').not(this).removeClass('active');
  $(this).addClass('active');
});

.active{
  color: white;
  background-color: green;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button id="btn-take" class="switch-btn">Take</button>
<button id="btn-ask" class="switch-btn-middle">Ask</button>
<button id="btn-trade" class="switch-btn">Trade</button>

You can approach what you need like this:

Html:

<div id="switch-btns">
  <button id="btn-take" class="switch-btn">Take</button>
  <button id="btn-ask" class="switch-btn-middle">Ask</button>
  <button id="btn-trade" class="switch-btn">Trade</button>
</div>

Css:

.active {
  background-color: red
}

Js:

$('#switch-btns').on('click', 'button', function() {

  $('#switch-btns button').each(function() {
    $(this).removeClass('active');
  });

  if($(this).hasClass('active')) return;
  $(this).addClass('active');
});

You can see my live implementation here: https://codepen.io/nazrhanmohcine/pen/ZdNWjy.