如何在单击时切换按钮颜色，并在再次单击时将颜色更改回其先前的颜色

Question

我必须创建一个用于主演消息的按钮。最初按钮的颜色是白色，当我点击按钮时它应该将颜色更改为金色，再次单击相同按钮（取消星空消息）时，颜色应该再次将颜色更改为初始背景颜色i：e白色。

HTML：<button class="btn-hold" data-text-swap=" Starred!">Star Message!</button>

JavaScript（用于切换按钮上的消息）：

button.addEventListener('click', function() {
  if (button.getAttribute("data-text-swap") == button.innerHTML) {
    button.innerHTML = button.getAttribute("data-text-original");
  } else {
    button.setAttribute("data-text-original", button.innerHTML);
    button.innerHTML = button.getAttribute("data-text-swap");
  }
}, false);

CSS：

.btn-hold{

    float: right;
    text-decoration-color: white;
    background-color: ; 
    font-family: Lato;
    font-size: 20px;
    cursor: pointer;    
}
button{
    float: right;
}
button:focus{
    background:#FFD700;
}

Answer 1

您可以使用toggle属性的原生classList方法。你的JavaScript也缺少了对点击的button的引用。

var button = document.querySelector('.btn-hold');

button.addEventListener('click', function() {
  this.classList.toggle('btn-alt-color');

  if (button.getAttribute("data-text-swap") == button.innerHTML) {
    button.innerHTML = button.getAttribute("data-text-original");
  } else {
    button.setAttribute("data-text-original", button.innerHTML);
    button.innerHTML = button.getAttribute("data-text-swap");
  }
}, false);

.btn-hold {
  float: right;
  text-decoration-color: white;
  background-color: ;
  font-family: Lato;
  font-size: 20px;
  cursor: pointer;
}

button {
  float: right;
}

button:focus {
  background: #FFD700;
}

.btn-hold.btn-alt-color {
  background-color: lightgreen;
}

<button class="btn-hold" data-text-swap=" Starred!">Star Message!</button>

jsFiddle

Answer 2

请注意，element.classList.toggle返回一个布尔值，不需要复杂化：

var
  button           = document.querySelector('.btn-hold'),
  defaultButtonTxt = button.textContent;


button.onclick = function() {
  this.textContent = (this.classList.toggle('btn-alt-color')) ? this.dataset.textSwap : defaultButtonTxt;
}

button {
  float: right;
}
.btn-hold {
  float: right;
  text-decoration-color: white;
  background: #FFD700;
  font-family: Lato;
  font-size: 20px;
  cursor: pointer;
}

.btn-alt-color {
  background-color: lightgreen;
}

<button class="btn-hold" data-text-swap=" Starred!">Star Message!</button>