如何切换按钮onClick的外观？

<button id="myButton" onclick="changeAppearance()">点击切换外观</button>

.button-default {
  background-color: #4CAF50;
  color: white;
}

.button-alternate {
  background-color: #f44336;
  color: white;
}

function changeAppearance() {
  var button = document.getElementById("myButton");
  if (button.classList.contains("button-default")) {
    button.classList.remove("button-default");
    button.classList.add("button-alternate");
  } else {
    button.classList.remove("button-alternate");
    button.classList.add("button-default");
  }
}