javascript - 单击时将图标添加到 HTML 按钮

Question

这是我的按钮:

<button type="button" id="myButton" class="myButtonCSS" onclick="handleMyButtonClick()"> myButton! </button>

在我的handleMyButtonClick()函数中，我有一些逻辑，但我想要完成的是在执行该逻辑时添加一个等待图标。我发现如何使用此代码执行此操作:

<i class="fa fa-spinner fa-spin"></i>

如果我将其添加到我原来的按钮声明中，它就可以工作，但它总是在那里。我只希望在单击时显示此内容。我正在尝试将“i class”添加到我的 JavaScript on click 函数中的按钮。我尝试过使用 .classList.add() 但我一定做错了，或者完全错误地处理它。我怎样才能做到这一点？

Answer 1

您需要做的是在方法的开头更新按钮的内部 html handleMyButtonClick()

var btn = document.getElementById('myButton');
btn.innerHTML = '<i class = "fa fa-spinner fa-spin"></i> Please wait...';

完成逻辑后，将按钮重置回原始状态。

btn.innerHTML = 'myButton!';

看看这个完整的代码。正如您所希望的那样工作。

function handleMyButtonClick(){
 // Get button element
 btn = document.getElementById('myButton');
 
 // Set the spinner 
 btn.innerHTML = '<i class = "fa fa-spinner fa-spin"></i> Please wait...';
 
 // Do the work. A sample method to wait for 3 second.
 setTimeout(function(){ 
 
 console.log("work done"); 
 
 // When the work is done, reset the button to original state
 btn.innerHTML = 'myButton!';
 
 }, 3000); 
 
}

<button type="button" id="myButton" class="myButtonCSS" onclick="handleMyButtonClick()"> myButton! </button>