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

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

您可以使用classList属性的本机toggle方法。 您的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>