Add class to an element using event.currentTarget.className

Question

I have a button with a yellow background, upon clicking the button I would like it to turn black(https://jsfiddle.net/dcq5v6hy/1/). I am trying to do this with a js function and a button.active css class (I have never seen .active, but I am trying to follow a W3Schools tutorial).

function changeColor(evt) {
  evt.currentTarget.className += "active";
}

.tab button {
  background-color: yellow;
}


/* Create an active/current tablink class */

.tab button.active {
  background-color: red;
}

<div class="tab">
  <button onclick="changeColor(event)">Click Me</button>
</div>

As you can see, nothing happens when the button is clicked. How can I fix this?

Answer 1

Try preppending a space in the appended string: evt.currentTarget.className += " active";