如何在按钮中在向下箭头和向上箭头之间切换？

<button id="toggleButton" class="downArrow"></button>

.downArrow {
  /* 向下箭头样式 */
  background-image: url(down_arrow.png);
}

.upArrow {
  /* 向上箭头样式 */
  background-image: url(up_arrow.png);
}

var toggleButton = document.getElementById("toggleButton");
toggleButton.addEventListener("click", function() {
  if (toggleButton.classList.contains("downArrow")) {
    toggleButton.classList.remove("downArrow");
    toggleButton.classList.add("upArrow");
  } else {
    toggleButton.classList.remove("upArrow");
    toggleButton.classList.add("downArrow");
  }
});

<button id="toggleButton">&#9660;</button>

var toggleButton = document.getElementById("toggleButton");
toggleButton.addEventListener("click", function() {
  if (toggleButton.innerHTML === "▼") {
    toggleButton.innerHTML = "▲";
  } else {
    toggleButton.innerHTML = "▼";
  }
});

<button id="toggleButton" class="fa fa-chevron-down"></button>

.fa-chevron-down:before {
  /* 向下箭头图标样式 */
  content: "\f078";
}

.fa-chevron-up:before {
  /* 向上箭头图标样式 */
  content: "\f077";
}

var toggleButton = document.getElementById("toggleButton");
toggleButton.addEventListener("click", function() {
  if (toggleButton.classList.contains("fa-chevron-down")) {
    toggleButton.classList.remove("fa-chevron-down");
    toggleButton.classList.add("fa-chevron-up");
  } else {
    toggleButton.classList.remove("fa-chevron-up");
    toggleButton.classList.add("fa-chevron-down");
  }
});