如何在單擊時切換按鈕顏色，並在再次單擊時將顏色更改回其先前的顏色

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>