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

Question

这是我的按钮：

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

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

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

如果我将它添加到我的原始按钮语句中，它会起作用，但它始终存在。我只希望在单击时显示它。我正在尝试将“i 类”添加到单击功能的 JavaScript 中的按钮。我试过使用，.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!';

看看这个完整的代码。随心所欲地工作。

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

btn.innerHTML = 'myButton!';