Javascript 尝试更改提交按钮的span类以显示引导加载微调器

我正在尝试使用JavaScript将submit按钮更改为加载微调器，文本为“loading…”，如下图所示

我可以更新按钮的innerHTML，但更改控制实际微调器的span类时遇到问题

以下是我的按钮html：

<button class="btn btn-primary mx-3" id="submit" onclick="loading()" type="submit">
  <span id="button_span"></span>
  Submit
</button>

---

任何帮助都将不胜感激。谢谢。

这是您的工作笔：

使用Jquery和Font-some。 有很多方法可以做到这一点，但这是其中之一

HTML

还推荐此解决方案：

---

我认为您不应该更改按钮的内部HTML或类。创建一个新的span，该span是加载动画，但默认情况下使用css prop

display:none

隐藏

---

单击按钮时，通过动态更改css隐藏按钮，并以相同的方式显示范围。然后，无论何时加载完成，只要将其向后翻转即可。

太棒了，谢谢！我所做的唯一更改是使用“生长”微调器而不是“fa”微调器。

function loading() {
    var button = document.getElementById("submit");
    button.innerHTML = "Loading...";
    var span = document.getElementById("button_span");
    span.classList.add("spinner-grow");
    span.classList.add("spinner-grow-sm");
}

<button class="btn btn-primary mx-3" id="submit" onclick="loading()" type="submit">
   <i class="fas fa-spinner fa-spin" style="display:none;"></i>
  <span class="btn-text">Submit</span>
</button>

function loading() {
  $(".btn .fa-spinner").show();
  $(".btn .btn-text").html("Loading");
  
}