更改引导加载按钮文本

Question

我一直在试图让一个加载按钮去引导刷新图形不断旋转，直到服务器响应我的请求。这是按钮：

<button type="submit" id="loading" name="loading" class="btn btn-lg btn-default" 
onclick="change()" style="margin-top:40px; margin-bottom:25px;"> 
span id="state"></span>Submit</button> 

当我点击该按钮，glyphicon到按钮的左边开始旋转，部分工作至今。该按钮右侧的文本（现在：提交）需要更改为“正在加载”。到目前为止，我有以下脚本：

<script type="text/javascript"> 
    function submit() { 
     document.getElementById("loading").click(); 
    } 
    function change() { 
     var mybutton = document.getElementById("loading"); 
     var mystring1 = document.getElementById("input_ipaddress").value; 
     var mystring2 = document.getElementById("input_hostname").value; 
     var mystring3 = document.getElementById("input_comms").value; 
     if (mystring1 && mystring2 && mystring3) { 
      document.getElementById("state").className = "glyphicon glyphicon-refresh glyphicon-refresh-animate"; 
      mybutton.innerHTML = "Loading..."; 
     }  
    } 
    // remove all classes of the "state" span class 
    window.onload = function() { 
     document.getElementById('state').className = ""; 
    }; 
</script> 

的CSS，如果这有助于解决我的问题：

.glyphicon-refresh-animate { 
-animation: spin .7s infinite linear; 
-webkit-animation: spin2 .7s infinite linear; 
} 

@-webkit-keyframes spin2 { 
from { -webkit-transform: rotate(0deg);} 
to { -webkit-transform: rotate(360deg);} 
} 

@keyframes spin { 
from { transform: scale(1) rotate(0deg);} 
to { transform: scale(1) rotate(360deg);} 
} 

我一直很努力的innerHTML，但当然一切替换（包括字形）与给定的文本。我该如何解决这个问题？

Answer 1

问题是您的新文本Loading..重叠​​。

试试这个：

mybutton.innerHTML = '<span id="state"></span>Loading..'