javascriptでhtmlボタンを変更する

Question

これを数日間解読しようとしていて、私の過ちを過ぎて見ることのできないトンネルビジョンがあると思います！

JavaScriptのメソッドを呼び出してtrueまたはfalseを渡すときに、ボタンのクラスがinnerHTMLと同様に変更されるようにするHTMLボタンがあります。現在、クラスを変更することしかできません。

var buttonHandler = function() { 
    toggleButton(false); 
    getRecords(); 
}; 

var btn = document.getElementById("get-records"); 
btn.addEventListener("click", buttonHandler); 

JS：

function toggleButton (loaded) { 
    btn.innerHTML = loaded ? "Get next" : "Loading..."; 
    btn.classList.toggle("button-not-loading"); 
    btn.classList.toggle("button-loading"); 
} 

HTML（ボタンは次のようになります）：以下のコードを参照してください

<button id="get-records" class="button-not-loading">Get next</button> 

CSS： .buttonローディング{ 背景色： dodgerblue; 色：HTMLが一度だけ変更された理由白 }

.button-not-loading { 
    background-color:lawngreen; 
    color:white 
} 

Answer 1

あなたは常にあなたのtoggleButton機能にfalseを渡すには、thatsの。

var loading = true; 
 

 
var buttonHandler = function() { 
 
    loading = !loading; 
 
    toggleButton(loading); 
 
    getRecords(); 
 
}; 
 

 

 
var btn = document.getElementById("get-records"); 
 
btn.addEventListener("click", buttonHandler); 
 

 
function toggleButton (loaded) { 
 
    btn.innerHTML = loaded ? "Get next" : "Loading..."; 
 
    btn.classList.toggle("button-not-loading"); 
 
    btn.classList.toggle("button-loading"); 
 
}

.button-loading { background-color:dodgerblue; color:white } 
 
.button-not-loading { background-color:lawngreen; color:white }

<button id="get-records" class="button-not-loading">Get next</button>

Answer 2

代わりのtoggleButton(false);
このtoggleButton(this.classList.contains('button-not-loading') ? false : true);