用javascript改變html按鈕

一直試圖破解這個好幾天，我想我的隧道視野看不到我的錯誤！用javascript改變html按鈕

我有一個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加載{ 背景色：寶藍; 顏色：白色 }

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

來源

2016-05-01 marianna013

你總是傳遞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>

來源

2016-05-01 08:49:37 t1m0n

好答案！當然，在實踐中，確保以有意義的方式命名全局變量。 '加載'是一個非常通用的名稱，可能會與其他切換按鈕發生衝突。 – Narxx

真棒！工作！ :) – marianna013

而不是toggleButton(false);
使用此toggleButton(this.classList.contains('button-not-loading') ? false : true);

來源

2016-05-01 08:53:25 nayeri

我個人喜歡這個解決方案使用全局變量。 – SarathChandra

用javascript改變html按鈕

回答

相關問題