用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按钮

回答

相关问题