How to change certain button class on click

Question

I'm trying to create an Html button with the class "btn inactive" that when clicked, changes to "btn active". I've tried using className, but that only resulted in errors. Anyone experienced with Javascript know how to do this?

Answer 1

No need for jQuery:

document.querySelector('button.btn').addEventListener('click', function() {
  this.classList.toggle('inactive');
  this.classList.toggle('active');
  console.log(this.className);
});

<div id="test">
  <button class="btn inactive">Click me!</button>
</div>

With jQuery:

$('button.btn').click(function(){
  $(this).toggleClass('inactive');
  $(this).toggleClass('active');
  console.log(this.className);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">
  <button class="btn inactive">Click me!</button>
</div>

Answer 2

You need to just use button.classList.toggle().

const button = document.getElementById('this-button');

button.addEventListener('click', function(){
  this.classList.toggle('active');
  this.classList.toggle('inactive');
});

.active { color: blue }
.inactive { color: red }

<button id="this-button" class="btn active">Click me</button>