Изменение кнопки html с javascript

Question

Пробовал взламывать это в течение многих дней, и я думаю, что у меня есть туннельное видение, которое не может увидеть мою ошибку!

У меня есть кнопка HTML, которая при вызове метода javascript и передаче его true или false Я хочу изменить класс кнопки, а также innerHTML. В настоящее время я могу только изменить класс. Смотрите код ниже:

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; цвет: белый }

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

Answer 1

Вы всегда проходят false к вашей toggleButton функции, то почему HTML изменяется только один раз. Вы должны изменить true/false также, просто добавьте переменную, которая будет хранить это значение:

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);