Changing the class of a button with Javascript

Question

How would I make it when the user clicks a button, opens a div and changes the color of the button? Since I am using Bootstrap, I tried this way, but I could only open the div, but not change the button color:

Javascript

<script>
  function mostrarDiv(valor)
  {
    var valor;
    if(valor == 0)
    {
      document.getElementById('outros').style.display='block';
      document.getElementById('categorias').style.display='none';
      document.getElementById('btnOutros').className = 'btn btn-xlg btn-primary waves-effect waves-light';
    }
    if(valor == 1)
    {
      document.getElementById('outros').style.display='none';
      document.getElementById('categorias').style.display='block';
      document.getElementById('btnCategorias').className = 'btn btn-xlg  btn-primary waves-effect waves-light';
    }
  }
</script>

Bootstrap

<button type="button" id="btnOutros" class="btn btn-xlg  btn-inverse-primary waves-effect waves-light" onclick="mostrarDiv(0)"><i class="fas fa-users"></i> Outros</button>
<button type="button" id="btnCategorias" class="btn btn-xlg btn-primary btn-inverse-primary waves-effect waves-light" onclick="mostrarDiv(1)"><i class="fas fa-list-ol"></i> Categorias</button>

HTML

<div id="outros">
   Conteúdo
</div>
<div id="categorias">
   Conteúdo
</div>

Answer 1

You can do this by removing/adding only the class in question, without having to repeat all classes:

As the friend said, the variable valor is already passed to the function, so do not need to declare it. By doing var valor; in function, you are overriding the value of valor which comes in the function parameter, making it Undefined.

function mostrarDiv(valor){
   if(!valor){ // significa que valor = 0
      document.getElementById('outros').style.display='block';
      document.getElementById('categorias').style.display='none';
      document.getElementById('btnCategorias').classList.remove("btn-primary");
      document.getElementById('btnOutros').classList.remove("btn-inverse-primary");
      document.getElementById('btnOutros').classList.add("btn-primary");
   }else{ // ou não é 0
      document.getElementById('outros').style.display='none';
      document.getElementById('categorias').style.display='block';
      document.getElementById('btnOutros').classList.remove("btn-primary");
      document.getElementById('btnCategorias').classList.remove("btn-inverse-primary");
      document.getElementById('btnCategorias').classList.add("btn-primary");
   }
}

#outros{
   display: none;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div id="outros">outros</div>
<div id="categorias">categorias</div>
<button type="button" id="btnOutros" class="btn btn-xlg btn-inverse-primary waves-effect waves-light" onclick="mostrarDiv(0)"><i class="fas fa-users"></i> Outros</button>
<button type="button" id="btnCategorias" class="btn btn-xlg btn-primary waves-effect waves-light" onclick="mostrarDiv(1)"><i class="fas fa-list-ol"></i> Categorias</button>

Answer 2

First you have an error because you are declaring the variable value and it is already passed as argument of Function, I do not understand what you wanted in this case.

Second, I ran your code and the button changes class when I click it, it’s correct. If you wanted there to always be a change from one state to another it’s something else.

My only chance is that you forgot to reference the styles in your file.

<!-- Bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">