Change the class of a Button element to show/hide it

I am trying to show or hide a button element based on certain criteria in my code. I have made the button's default css to "hide" it with display: none, then to add a class that changes the display to display: block.

HTML:

<div>
  <button id="show">SHOW</button>
</div>

CSS:

#show {
  display: none;
}

#show .visible {
  display: block;
}

JS:

var d = document.getElementById('show');
d.className += "visible";

I have also tried:

var d = document.getElementById('show');
d.classList.add("visible");

As well as:

documnet.getElementById('show').classList.add('visible');

The problem is that I can't get the class to apply properly, and won't display the button when the class is updated. I'm sure I'm overlooking something simple, just not sure what it is if someone can assist.